BootStrap選項卡

BootStrap選項卡的創建是根據導航條來的，其創建需要幾個專用的屬性。

data-toggle=" tab  " 或者 data-toggle=" pill" ,data-target="#id" ,類 tab-content,tab-pane.

實現選項卡的效果有兩種方法，一種是直接配置，一種是JavaScript綁定。

選項卡的基本要求：

　　　　　　　　1：選項卡導航和卡面板要同時有。但位置可以隨便放。

　　　　　　　　2：導航鏈接里面設置 data-toggle="tab",還要設置data-target="#.." (或者href="#..")

　　　　　　　　3:tab-pane 放在tab-content里，要有id，且與data-target=" #.."一致。

源碼如下：

 1　　　　 <ul class="nav nav-tabs">
            <li > <a  data-toggle="tab" data-target="#a">Home</a></li>
            <li><a  data-toggle="tab" data-target="#b">Profile</a></li>
            <li><a  data-toggle="tab" data-target="#c">Message</a></li>
            <li><a  data-toggle="tab"data-target="#d">Setting</a></li>
 　　 </ul>
        <div class="tab-content">
            <div class="tab-pane  fade in active" id="a">
                <h3> home</h3>
            </div>
            <div class="tab-pane fade " id="b">
                <h3>proifle</h3>
            </div>
            <div class="tab-pane fade" id="c">
                <h3>Messsage</h3>
            </div>
            <div class="tab-pane fade " id="d">
                <h3>Setting</h3>
            </div>
        </div>

默認情況下：tab-pane 是隱藏的，只有給他active樣式才會顯示。fade為漸入效果。

效果如下：