它是Bootstrap定义的HTML5数据属性。它将一个按钮绑定到一个事件。

它是Bootstrap定义的HTML5数据属性。它将一个按钮绑定到一个事件。

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>

工作得很好。

例如，假设您正在创建一个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访问它，并根据这些数据操作页面。

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

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

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

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

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