data-toggle属性在Twitter Bootstrap中做了什么？我在Bootstrap API中找不到答案。
我之前也见过类似的问题，link。但它对我帮助不大。
它是一个HTML5数据属性，可以自动将元素与其窗口小部件类型挂钩。
一些例子：
data-toggle="modal"
data-toggle="collapse"
data-toggle="dropdown"
data-toggle="tab"
浏览JavaScript docs并搜索数据切换，您将看到它在代码示例中使用。
一个工作的例子：
<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>Bootstrap利用HTML5标准，以便在javascript中轻松访问DOM元素属性。
形成一类属性，称为自定义数据属性，允许在HTML及其可由脚本使用的DOM表示之间交换专有信息。所有这些自定义数据都可通过设置属性的元素的HTMLElement接口获得。 HTMLElement.dataset属性提供对它们的访问。
以data-开头的任何属性都是用于某些特定目的的自定义属性的前缀（该目的取决于应用程序）。它被添加为人们大量使用rel和其他属性的语义补救措施，用于除了原始预期目的之外的目的（rel通常用于保存高级工具提示等数据）。
在Bootstrap的情况下，我不熟悉它的内部工作，但从名称判断，我猜它是一个钩子，允许切换可见性或它附加的元素的模式（如可折叠边栏on Octopress.org）。
html5doctor has a good article on the data- attribute。
Cycle 2 is another example of extensive use of the data- attribute。
例如，假设您正在创建一个Web应用程序来列出和显示配方。您可能希望客户在选择要打开的配方之前能够对列表进行排序，显示配方的功能等。为了做到这一点，你需要在食谱的列表元素内直接关联烹饪时间，主要成分，膳食位置等内容。
<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属性添加到列表项，您可以根据时间，膳食和成分（即）将所有配方放在单独的文件夹中。大多数开发人员采用的解决方案是使用类属性来存储有关当前元素的信息。这有几个好处：
但是这种方法存在一些主要缺点：
我建议的所有其他方法都存在这些问题以及其他问题。但由于这是快速，轻松地包含数据的唯一方法，这就是我们所做的。 HTML5数据属性到救援
HTML5为任何元素添加了一种新类型的属性 - 自定义数据元素（data- *）。这些是自定义（由*表示）属性，您可以将这些属性添加到HTML元素以定义所需的任何类型的数据。它们由两部分组成：
属性名称这是属性的名称。它必须至少为一个小写字符并且具有前缀data-。例如：数据主要成分，数据烹饪时间，数据餐。这是您的数据名称。
属性Vaule与任何其他HTML属性一样，您将数据本身包含在由等号分隔的引号中。此数据可以是在网页上有效的任何字符串。例如：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解析器解析。data-toggle属性来创建折叠功能。使用方法：仅2步
class="collapse"添加到要折叠的元素#A中。data-target="#A"和data-toggle="collapse"。目的：如果我们使用Bootstrap，data-toggle属性允许我们创建一个控件来折叠/展开div（块）。
此数据属性的存在告诉Bootstrap在用户交互的另一个元素的可视或逻辑状态之间切换。
它用于显示模态，选项卡内容，工具提示和弹出菜单，以及为切换按钮设置按下状态。它以多种方式使用，没有明确的文档。
在引导程序中进行数据切换的目的是让您可以使用jQuery查找某种类型的所有标记。例如，您将data-toggle =“popover”放在所有popover标记中，然后您可以使用JQuery选择器查找所有这些标记并运行popover（）函数来初始化它们。您也可以将class =“myPopover”放在标记上，并使用.myPopover选择器执行相同的操作。文档令人困惑，因为它使得该属性看起来特殊。
这个
<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定义的HTML5数据属性。它将按钮绑定到事件。
Here你也可以找到data-toggle可以分配的值的更多例子。只需访问该页面，然后CTRL+F搜索data-toggle。