Answers:
它是一个Bootstrap数据属性，可自动将元素连接到其所属的小部件类型。Data- *是html5规范的一部分，而data-toggle特定于Bootstrap。
一些例子：
data-toggle="modal"
data-toggle="collapse"
data-toggle="dropdown"
data-toggle="tab"查看Bootstrap JavaScript文档并搜索数据切换，您将在代码示例中看到它。
一个工作示例：
<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>任何以开头的data-属性都是用于某些特定目的的自定义属性的前缀（该目的取决于应用程序）。它被作为一种语义上的补救措施，用于人们rel出于最初意图之外的目的而大量使用和其他属性（rel通常用于保存诸如高级工具提示之类的数据）。
就Bootstrap而言，我不熟悉其内部工作原理，但从名称来看，我猜想这是一个钩子，可以切换可见性或它所附加元素的模式（例如可折叠Octopress.org上的侧边栏）。
例如，假设您正在创建一个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-。例如：数据主成分，数据烹饪时间，数据餐。这是您的数据的名称。
与其他任何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（块）。
引导程序中的数据切换的目的是使您可以使用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>效果很好。