data-toggle="modal"
data-toggle="collapse"
data-toggle="dropdown"
data-toggle="tab"
<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
经常用于保存高级工具提示等数据)。<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属性,您可以根据时间、餐点和食材将所有食谱放置在单独的文件夹中(即)。大多数开发人员采用的解决方案是使用class属性来存储有关当前元素的信息。这样做有几个优点:
但是,这种方法也存在一些主要缺点:
我提出的所有其他方法都存在这些问题以及其他问题。但由于它是快速轻松地包含数据的唯一方式,因此我们这样做了。 HTML5数据属性挽救了局面
HTML5向任何元素添加了一种新类型的属性-自定义数据元素(data-*)。这些是您可以添加到HTML元素的自定义(用*表示)属性,以定义任何类型的数据。它们由两部分组成:
属性名称 这是属性的名称。它必须至少是一个小写字符,并具有前缀data-。例如:data-main-ingredient,data-cooking-time,data-meal。这是您的数据名称。
属性值 与任何其他HTML属性一样,您需要在引号中包含数据,并用等号分隔。此数据可以是Web页面上有效的任何字符串。例如: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>
已经有很多答案了,但它们没有直接点到问题的核心。让我们来改进一下。
http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp
直接点到问题的核心
data-
开头的属性都不会被 HTML5 解析器解析。data-toggle
属性来创建折叠功能。如何使用: 仅需2个步骤
#A
中添加 class="collapse"
。data-target="#A"
和 data-toggle="collapse"
。目的: 如果我们使用 Bootstrap,data-toggle
属性可以让我们创建一个控件来折叠/展开一个 div
(块)。
<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>
工作得很好。
这个数据属性的存在告诉Bootstrap在用户交互时切换另一个元素的视觉或逻辑状态。
它用于显示模态框、选项卡内容、工具提示和弹出式菜单,以及为切换按钮设置按下状态。它有多种用法,但没有清晰的文档说明。
这是Bootstrap定义的HTML5数据属性。它将按钮绑定到一个事件。
Bootstrap利用HTML5标准,以便在javascript中轻松访问DOM元素属性。
形成了一类属性,称为自定义数据属性,允许在HTML和其DOM表示之间交换专有信息,这些信息可能被脚本使用。所有这些自定义数据都可以通过设置属性的元素的HTMLElement接口获得。HTMLElement.dataset属性可访问它们。