Bootstrap頁面佈局17 - BS選項卡

代碼結構：

<div class='container-fluid'>
    <h2 class='page-header'>Bootstrap 選項卡</h2>
    <!--
        選項卡：經過BS的類來控制選項卡的樣式
　　　　 ?處能夠換成如下幾個類
　　　　 .nav-tabs:如圖1
　　　　 .nav-pills:如圖2
　　　　 .nav-tabs nav-stacked:如圖3 -->
    <ul class='nav ?'>
        <li class='active'><a href='#'>選項一</a></li>
        <li><a href='#'>選項二</a></li>
        <li><a href='#'>選項三</a></li>
        <li><a href='#'>選項四</a></li>
        <li><a href='#'>選項五</a></li>
    </ul>
</div>

圖1：　　　　　　.nav-tabs

圖2：　　　　　　.nav-pills

圖3：　　　　　　.nav-tabs nav-stacked

選項卡內容部分的代碼：

<div class='container-fluid'>
    <h2 class='page-header'>Bootstrap 選項卡</h2>
    <!--
        選項卡：經過BS的類來控制選項卡的樣式
    -->
    <ul class='nav nav-tabs'>
        <li class='active'><a href='#tab1' data-toggle='tab'>選項一</a></li>
        <li><a href='#tab2' data-toggle='tab'>選項二</a></li>
        <li><a href='#tab3' data-toggle='tab'>選項三</a></li>
        <li><a href='#tab4' data-toggle='tab'>選項四</a></li>
        <li><a href='#tab5' data-toggle='tab'>選項五</a></li>
    </ul>
    
    <!--
        選項卡的內容定義
    -->
    <div class='tab-content'>
        <div class='tab-pane active' id='tab1'><p>我是選項卡一的內容</p></div>
        <div class='tab-pane' id='tab2'><p>我是選項卡二的內容</p></div>
        <div class='tab-pane' id='tab3'><p>我是選項卡三的內容</p></div>
        <div class='tab-pane' id='tab4'><p>我是選項卡四的內容</p></div>
        <div class='tab-pane' id='tab5'><p>我是選項卡五的內容</p></div>
    </div>
    
</div>

如圖

 

選項卡居右(居左)：

<div class='container-fluid'>
    <h2 class='page-header'>Bootstrap 選項卡</h2>

    <div class='tabbable tabs-left'>
    
        <!--
            選項卡：經過BS的類來控制選項卡的樣式
        -->
        <ul class='nav nav-tabs'>
            <li class='active'><a href='#tab1' data-toggle='tab'>選項一</a></li>
            <li><a href='#tab2' data-toggle='tab'>選項二</a></li>
            <li><a href='#tab3' data-toggle='tab'>選項三</a></li>
            <li><a href='#tab4' data-toggle='tab'>選項四</a></li>
            <li><a href='#tab5' data-toggle='tab'>選項五</a></li>
        </ul>
        
        <!--
            選項卡的內容定義
        -->
        <div class='tab-content'>
            <div class='tab-pane active' id='tab1'>我是選項卡一的內容</div>
            <div class='tab-pane' id='tab2'>我是選項卡二的內容</div>
            <div class='tab-pane' id='tab3'>我是選項卡三的內容</div>
            <div class='tab-pane' id='tab4'>我是選項卡四的內容</div>
            <div class='tab-pane' id='tab5'>我是選項卡五的內容</div>
        </div> 
    </div>
      
</div>

選項卡居左：

　　添加一個div且 class='tabbable tabs-left' ，如圖1：

選項卡居右：

　　添加一個div且 class='tabbable tabs-right'，如圖2：

選項卡居下：

　　添加一個div且 class='tabbable tabs-below',且 .tab-content 與 .nav nav-tabs互換位置，如圖3：

圖1：

圖2：

圖3：

注意：

　　若是在運用bootstrap2的時候有些地方經過以上代碼沒法獲得對應的效果，那麼也許是bs的版本問題，從新下載一個能夠解決戰鬥！