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

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

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

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

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

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>

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

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

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

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

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

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(块)。

这个data-属性的存在告诉Bootstrap在用户交互时在另一个元素的可视或逻辑状态之间切换。

它用于显示模式、选项卡内容、工具提示和弹出菜单，以及设置切换按钮的按下状态。它可以在没有明确文档的情况下以多种方式使用。