Twitter 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）访问类很容易
• 该类与其所在的元素相关联

但是此方法有一些主要缺点：

• 您必须记住课程的内容。如果您忘记了或新的开发人员接管了该项目，则可能会删除或更改这些类，而不会意识到这会影响应用程序的运行方式。
• 类也可用于CSS样式，您可能会错误地将CSS类与数据类重复，最终在您的实时页面上出现奇怪的样式。
• 添加多个数据元素更加困难。如果您有多个数据元素，则需要通过类以某种方式通过类的名称或在类列表中的位置来访问它们。但是很容易搞砸。

我建议的所有其他方法都存在这些问题以及其他问题。但是由于这是快速，轻松地包含数据的唯一方法，所以我们就是这样做的。救援的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>

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