Twitter Bootstrap中的数据切换属性
data-toggle属性在Twitter Bootstrap中做了什么？ 我在Bootstrap API中找不到答案。
之前我也见过类似的问题， 链接 。 但是这并没有太大的帮助。
它是一个HTML5数据属性，可以自动将元素挂接到它所处的小部件types。
一些例子：
data-toggle="modal" data-toggle="collapse" data-toggle="dropdown" data-toggle="tab"
浏览JavaScript文档并search数据切换，您将看到它在代码示例中使用。
一个工作的例子：
<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>
任何以data-开头的属性都是用于特定目的的自定义属性的前缀（目的取决于应用程序）。 它被添加为一种语义补救措施，用于人们大量使用rel和其他属性，用于非最初的目的（ rel通常用于保存高级工具提示等数据）。
在Bootstrap的情况下，我不熟悉它的内部工作，但从名称来看，我想这是一个钩子，允许切换可见性或者它所连接的元素的模式（比如可折叠在Octopress.org上的边栏）。
html5doctor在数据属性上有一篇很好的文章 。
周期2是广泛使用数据属性的另一个例子 。
例如，假设您正在创build一个Web应用程序来列出和显示食谱。 您可能希望客户能够在select要打开的配方之前对列表进行sorting，显示配方的function等等。 为了做到这一点，你需要在烹饪时间，主要成分，用餐位置等内容的配方列表元素。
<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属性添加到列表项中，您可以根据时间，用餐和配料（即）将所有配方放在单独的文件夹中。 大多数开发人员采用的解决scheme是使用类属性来存储有关当前元素的信息。 这有几个好处：
- 你可以在一个元素上存储多个类
- 类名可以是人类可读的
- 使用JavaScript访问类很容易（className）
- 该类与它所在的元素相关联
但是这种方法有一些主要的缺点：
- 你必须记住这些课程是做什么的。 如果您忘记了或者新的开发人员接pipe了项目，则可能会删除或更改这些类，而不会意识到这会影响应用程序的运行方式。
- 类也用于使用CSS进行样式devise，并且您可能会错误地复制具有数据类的CSS类，最后会在实际页面上出现奇怪的样式。
- 添加多个数据元素更加困难。 如果你有多个数据元素，你需要通过你的JavaScript以某种方式访问它们，无论是通过类名称还是类列表中的位置。 但是很容易搞砸。
我提出的所有其他方法都有这些问题以及其他问题。 但是，因为这是快速简便地包含数据的唯一方法，所以我们就是这么做的。 HTML5数据属性的救援
HTML5为任何元素添加了一种新的属性 – 自定义数据元素（data- *）。 这些是自定义的（用*表示的）属性，你可以添加到你的HTML元素来定义你想要的任何types的数据。 它们由两部分组成：
属性名称这是属性的名称。 它必须至less有一个小写字符，并有前缀data-。 例如：数据主成分，数据烹饪时间，数据餐。 这是您的数据的名称。
Attribute Vaule与其他任何HTML属性一样，您将数据本身包含在用等号分隔的引号中。 这些数据可以是任何在网页上有效的string。 例如：data-main-ingredient =“巧克力”。
然后，您可以将这些数据属性应用到您想要的任何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访问它，并根据这些数据来操作页面。
从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>
它是Bootstrap定义的HTML5数据属性。 它将一个button绑定到一个事件。
这个数据属性的存在告诉Bootstrap在用户交互的另一个元素的可视或逻辑状态之间切换。
它用来显示模式，标签内容，工具提示和popup式菜单，以及设置切换button的按下状态。 没有明确的文件，它以多种方式使用。
bootstrap中的数据切换的目的是让您可以使用jQuery来查找某个types的所有标签。 例如，你在所有的popover标签中join了data-toggle =“popover”，然后你可以使用JQueryselect器来查找所有这些标签并运行popover（）函数来初始化它们。 您也可以将class =“myPopover”放在标签上，并使用.myPopoverselect器来执行相同的操作。 这些文档是令人困惑的，因为它使得看起来这个特性正在发生一些特殊的事情。
这个
<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>
工作得很好。
在这里，您还可以find更多data-toggle可以分配的值的示例。 只要访问该页面，然后按CTRL+Fsearchdata-toggle 。
引导程序利用HTML5标准，以便在JavaScript内轻松访问DOM元素属性。
数据-*
形成一类称为自定义数据属性的属性，允许专有信息在HTML及其脚本可能使用的DOM表示之间进行交换。 所有这些自定义数据都可以通过元素的HTMLElement接口来设置。 HTMLElement.dataset属性可以访问它们。
参考
给出了很多答案，但我不能得到答案。 让我们看看这个。 http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp
重点
一个。 任何以data开头的属性都不会被HTML5parsing器parsing。
b.Bootstrap使用数据切换属性来创build折叠function
如何使用 ：只有2个步骤
1）将class =“collapse”添加到要折叠的元素#A。
2）添加data-target =“＃A”和data-toggle =“collapse”
Purport：数据切换属性帮助我们创build控制来折叠/展开div（块），如果我们使用CSS Bootstrap
