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

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

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

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

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

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

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

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

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>

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

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

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

例如，假设您正在创建一个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属性，可以根据时间、餐点和配料(即)将所有食谱放在单独的文件夹中。大多数开发人员采用的解决方案是使用类属性来存储关于当前元素的信息。这有几个优点:

可以在一个元素上存储多个类 类名可以是人类可读的 使用JavaScript很容易访问类(className) 类与它所在的元素相关联

但是这种方法有一些主要的缺点:

You have to remember what the classes do. If you forget or a new developer takes over the project, the classes might be removed or changed without realizing that that affects how the application runs. Classes are also used for styling with CSS, and you might duplicate CSS classes with data classes by mistake, ending up with strange styles on your live pages. It’s more difficult to add on multiple data elements. If you have multiple data elements, you need to access them in some way with your JavaScript, either by the name of the class or the position in the class list. But it’s easy to mess up.

我建议的所有其他方法都存在这些问题。但由于这是快速而简单地包含数据的唯一方法，所以我们就这么做了。 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访问它，并根据这些数据操作页面。