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