一些示例：
data-toggle="modal"
data-toggle="collapse"
data-toggle="dropdown"
data-toggle="tab"
请查看Bootstrap JavaScript文档中的data-toggle，并查找其中的代码示例。
一个可行的示例：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href="#">Item</a></li>
</ul>
</div>8
data-开头的属性都是用于某些特定目的的自定义属性前缀（该目的取决于应用程序）。它被添加为语义补救措施，以解决人们对rel和其他属性的过度使用，而这些属性的目的不是它们最初预期的目的（rel经常用于保存高级工具提示等数据）。在Bootstrap的情况下，我不熟悉其内部工作原理，但从名称来看，我猜它是一个钩子，允许切换其所附加元素的可见性或可能是模式（例如 collapsable side bar on Octopress.org）。 html5doctor有一篇关于data-属性的好文章。 Cycle 2是data-属性广泛使用的另一个例子。
1
<li><a href="recipe1.html">Borscht</a></li>
<li><a href="recipe2.html">Chocolate Mousse</a></li>
<li><a href="recipe3.html">Almond Radiccio Salad</a></li>
<li><a href="recipe4.html">Deviled Eggs</a></li>
为了将这些信息添加到网页中，您可以采取许多不同的方法。您可以在每个LI元素中添加注释，您可以在列表项中添加rel属性，您可以根据时间、餐点和食材将所有食谱放置在单独的文件夹中（即）。大多数开发人员采用的解决方案是使用class属性来存储有关当前元素的信息。这样做有几个优点：
- 您可以在一个元素上存储多个类
- 类名可读性强
- 使用JavaScript（className）很容易访问类
- 类与其所在的元素相关联
但是，这种方法也存在一些主要缺点：
- 您必须记住类的作用。如果忘记或新的开发人员接管项目，可能会删除或更改类，而不意识到这会影响应用程序的运行方式。
- 类还用于CSS样式，您可能会错误地通过数据类重复CSS类，从而在实时页面上出现奇怪的样式。
- 更难添加多个数据元素。如果有多个数据元素，您需要以某种方式使用JavaScript访问它们，无论是通过类的名称还是类列表中的位置。但很容易出错。
我提出的所有其他方法都存在这些问题以及其他问题。但由于它是快速轻松地包含数据的唯一方式，因此我们这样做了。 HTML5数据属性挽救了局面
HTML5向任何元素添加了一种新类型的属性-自定义数据元素（data-*）。这些是您可以添加到HTML元素的自定义（用*表示）属性，以定义任何类型的数据。它们由两部分组成：
属性名称 这是属性的名称。它必须至少是一个小写字符，并具有前缀data-。例如：data-main-ingredient，data-cooking-time，data-meal。这是您的数据名称。
属性值 与任何其他HTML属性一样，您需要在引号中包含数据，并用等号分隔。此数据可以是Web页面上有效的任何字符串。例如：data-main-ingredient="chocolate"。
然后，您可以将这些数据属性应用于任何想要的HTML元素。例如，您可以定义上面示例列表中的信息：
<li data-main-ingredient="beets" data-cooking-time="1 hour" data-meal="dinner"><a href="recipe1.html">Borscht</a></li>
<li data-main-ingredient="chocolate" data-cooking-time="30 minutes" data-meal="dessert"><a href="recipe2.html">Chocolate Mousse</a></li>
<li data-main-ingredient="radiccio" data-cooking-time="20 minutes" data-meal="dinner"><a href="recipe1.html">Almond Radiccio Salad</a></li>
<li data-main-ingredient="eggs" data-cooking-time="15 minutes" data-meal="appetizer"><a href="recipe1.html">Deviled Eggs</a></li>
一旦你在HTML中拥有这些信息，你就可以使用JavaScript访问它并基于该数据操作页面。
<!--Activate a modal without writing JavaScript. Set data-toggle="modal" on a
controller element, like a button, along with a data-target="#foo" or href="#foo"
to target a specific modal to toggle.-->
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
已经有很多答案了，但它们没有直接点到问题的核心。让我们来改进一下。
http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp
直接点到问题的核心
- 任何以
data-开头的属性都不会被 HTML5 解析器解析。 - Bootstrap 使用
data-toggle属性来创建折叠功能。
如何使用: 仅需2个步骤
- 在想要折叠的元素
#A中添加class="collapse"。 - 添加
data-target="#A"和data-toggle="collapse"。
目的: 如果我们使用 Bootstrap，data-toggle 属性可以让我们创建一个控件来折叠/展开一个 div (块)。
<div class="container">
<h3>Popover Example</h3>
<a href="#" class="myPop" title="Popover1 Header" data-content="Some content inside the popover1">Toggle popover1</a>
<a href="#" class="myPop" title="Popover2 Header" data-content="Some content inside the popover2">Toggle popover2</a>
</div>
<script>
$(document).ready(function(){
$('.myPop').popover();
});
</script>
工作得很好。
这个数据属性的存在告诉Bootstrap在用户交互时切换另一个元素的视觉或逻辑状态。
它用于显示模态框、选项卡内容、工具提示和弹出式菜单，以及为切换按钮设置按下状态。它有多种用法，但没有清晰的文档说明。
这是Bootstrap定义的HTML5数据属性。它将按钮绑定到一个事件。
2
Bootstrap利用HTML5标准，以便在javascript中轻松访问DOM元素属性。
data-*
形成了一类属性，称为自定义数据属性，允许在HTML和其DOM表示之间交换专有信息，这些信息可能被脚本使用。所有这些自定义数据都可以通过设置属性的元素的HTMLElement接口获得。HTMLElement.dataset属性可访问它们。
原文链接
- 相关问题
- 27 Bootstrap data-toggle和data-bs-toggle属性有什么区别？
- 196 具有多个"data-toggle"的Bootstrap控件
- 5 Bootstrap - 当存在多个按钮时，如何使用 data-toggle 属性
- 5 禁用时删除data-toggle属性
- 3 在Bootstrap中，data-toggle和data-target不起作用
- 3 Twitter Bootstrap的data-toggle="tab dropdown"无法工作
- 3 如何有条件地控制/停止Bootstrap中的data-toggle？
- 6 Bootstrap的data-toggle、data-target和href属性
- 4 未定义的属性名（data-toggle）
- 33 Bootstrap框架中的"data-toggle"属性是从哪里来的？