数据切换属性在推特引导中做什么?我在Bootstrap API中找不到答案。
我以前也见过类似的问题。 但这对我帮助不大。
当前回答
Bootstrap利用HTML5标准，以便在javascript中轻松访问DOM元素属性。
数据- *
形成一类称为自定义数据属性的属性，这些属性允许在HTML和脚本使用的DOM表示之间交换专有信息。所有这些自定义数据都可以通过属性设置所在元素的HTMLElement接口获得。HTMLElement。Dataset属性提供对它们的访问。
参考
其他回答
它是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>
工作得很好。
这个data-属性的存在告诉Bootstrap在用户交互时在另一个元素的可视或逻辑状态之间切换。
它用于显示模式、选项卡内容、工具提示和弹出菜单，以及设置切换按钮的按下状态。它可以在没有明确文档的情况下以多种方式使用。
已经给出了这么多答案，但都没说到点子上。让我们来解决这个问题。
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(块)。
它是一个Bootstrap数据属性，自动将元素与它所在的小部件类型挂钩。Data-*是html5规范的一部分，Data- toggle是Bootstrap特有的。
一些例子:
data-toggle="modal"
data-toggle="collapse"
data-toggle="dropdown"
data-toggle="tab"
浏览Bootstrap JavaScript文档并搜索data-toggle，您将在代码示例中看到它的使用。
一个工作示例:
<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>
