任何以data-开头的属性都是用于某些特定目的(该目的取决于应用程序)的自定义属性的前缀。它被添加为一种语义补救方法，以解决人们大量使用rel和其他属性而不是用于原始目的的问题(rel通常用于保存高级工具提示等数据)。

在Bootstrap的情况下，我不熟悉它的内部工作原理，但从名字判断，我猜它是一个钩子，允许切换可见性或它所附加的元素的模式(例如Octopress.org上的可折叠侧栏)。

Html5doctor有一篇关于data-属性的好文章。

循环2是广泛使用data-属性的另一个例子。

它是一个Bootstrap数据属性，自动将元素与它所在的小部件类型挂钩。Data-*是html5规范的一部分，Data- toggle是Bootstrap特有的。

一些例子:

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>

在这里，您还可以找到更多数据切换可以赋值的示例。只需访问页面，然后按CTRL+F搜索数据切换。

已经给出了这么多答案，但都没说到点子上。让我们来解决这个问题。

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"。

用途:data-toggle属性允许我们在使用Bootstrap时创建一个控件来折叠/展开div(块)。

The purpose of data-toggle in bootstrap is so you can use jQuery to find all tags of a certain type. For example, you put data-toggle="popover" in all popover tags and then you can use a JQuery selector to find all those tags and run the popover() function to initialize them. You could just as well put class="myPopover" on the tag and use the .myPopover selector to do the same thing. The documentation is confusing, because it makes it appear that something special is going on with that attribute.

This

<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文档:

<!--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>