data-toggle,data-dismiss,data-target用法

Bootstrap 使用data-toggle,data-dismiss,data-target这些属性，是为了给元素绑定事件，而终止元素原本的默认行为。

一.要领：
1.data-toggle指以什么事件触发，常用的如modal,popover,tooltips，collapse，dropdown等；
2.data-target：指事件的目标，一般用于button标签里面，后面的参数是响应的标签对应的ID；
3.data-dismiss：标记点击后消失；

二.说明：

例子1

<a id="signin-button" class="pull-right" href="login.html" data-toggle="modal" data-target="#signin-signup-tab">Sign In</a>

这段代码的意思是指将#signin-signup-tab这个Dom元素的内容以模态框的形式展示。

例子2

<ul>  <li class="active"><a href="#tab1" data-toggle="tab">Tab1</a></li></ul>

在这段代码中，data-toggle="tab"将属性转换成了tab属性，所以当a元素添加了data-toggle=“tab”之后其默认跳转的特性将被移除。

例子3

<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span></button>
<div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">

<ul class="nav navbar-nav">

<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>

<li><a href="#">Link</a></li>

</ul>

<div>

.collapse 类用于指定一个折叠元素 (实例中的<div>); 点击按钮后会在隐藏与显示之间切换。
控制内容的隐藏与显示，需要在 <a> 或 <button>元素上添加 data-toggle="collapse" 属性。 data-target="#id" 属性是对应折叠的内容。

三.注意点
<a>元素上你可以使用 href 属性来代替 data-target 属性: