data-* 常用属性 Bootstrap

【1】data-toggle：指以什么事件类型触发，常用的有：

data-toggle="button"    //按钮事件
data-toggle="dropdown"  //下拉菜单
data-toggle="collapse"  //折叠
data-toggle="tab"       //标签页
data-toggle="tooltip"   //提示框事件
data-toggle="popover"   //弹出框事件
data-toggle="model"     //模态框事件

<!--data-toggle="button" 案例-->
<button type="button" class="btn btn-default" data-toggle="button">单个切换</button>

<!--data-toggle="dropdown" 案例-->
<div class="dropdown">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        下拉菜单 <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">下拉菜单列表1</a></li>
        <li><a href="#">下拉菜单列表2</a></li>
        <li><a href="#">下拉菜单列表3</a></li>
    </ul>
</div>

<!--data-toggle="collapse" 案例-->
<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">网站logo</a>
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNav">
                <span class="sr-only">导航折叠</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="navbar-collapse collapse" id="myNav">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">导航菜单1</a></li>
                <li><a href="#">导航菜单2</a></li>
                <li><a href="#">导航菜单3</a></li>
                <li><a href="#">导航菜单4</a></li>
            </ul>
        </div>
    </div>
</nav>

PS：data-target：指事件的目标

当data-toggle和data-target结合使用的时候(如上),表示将#myNav这个DOM元素以下拉菜单的形式去展示

<!--data-toggle="tab" 案例-->
<div style="margin:20px 50px;">
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#tba1" role="tab" data-toggle="tab">tab1</a></li>
        <li role="presentation"><a href="#tba2" role="tab" data-toggle="tab">tab1</a></li>
        <li role="presentation"><a href="#tba3" role="tab" data-toggle="tab">tab1</a></li>
        <li role="presentation"><a href="#tba4" role="tab" data-toggle="tab">tab1</a></li>
    </ul>
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="tab1">tab1标签页对应内容页面……</div>
        <div role="tabpanel" class="tab-pane" id="tab2">tab2标签页对应内容页面……</div>
        <div role="tabpanel" class="tab-pane" id="tab3">tab3标签页对应内容页面……</div>
        <div role="tabpanel" class="tab-pane" id="tab4">tab4标签页对应内容页面……</div>
    </div>
</div>

 【2】data-dismiss：常见的是在模态窗口中用于关闭模态窗口 data-dismiss="modal"

 【3】data-slide-to、dataslide、data-ride