bootstrap導(dǎo)航、選項卡實現(xiàn)代碼

更新時間：2016年12月28日 17:08:20 作者：有點懶惰的小青年

這篇文章主要為大家詳細(xì)介紹了bootstrap導(dǎo)航、選項卡的實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了bootstrap導(dǎo)航和選項卡的具體代碼，供大家參考，具體內(nèi)容如下

導(dǎo)航：

<!--
 nav    導(dǎo)航的基礎(chǔ)樣式
 -->
<div class="container">
 <div class="row">
  <ul class="nav nav-tabs">
   <li><a href="#">雪碧圖</a></li>
   <li class="active"><a href="#">可樂</a></li>
   <li><a href="#">coffee</a></li>
  </ul>
 </div>

 <!-- 膠囊式 nav-pills-->
 <div class="row" style="margin-top:20px">
  <ul class="nav nav-pills">
   <li><a href="#">雪碧圖</a></li>
   <li class="active"><a href="#">可樂</a></li>
   <li><a href="#">coffee</a></li>
  </ul>
 </div>

 <!-- 豎著排 nav-stacked-->
 <div class="row" style="margin-top:20px">
  <ul class="nav nav-pills nav-stacked">
   <li><a href="#">雪碧圖</a></li>
   <li class="active"><a href="#">可樂</a></li>
   <li><a href="#">coffee</a></li>
  </ul>
 </div>

 <!-- 兩端對齊 nav-justified-->
 <div class="row" style="margin-top:20px">
  <ul class="nav nav-pills nav-justified">
   <li><a href="#">雪碧圖</a></li>
   <li class="active"><a href="#">可樂</a></li>
   <li><a href="#">coffee</a></li>
  </ul>
 </div>

 <!-- 導(dǎo)航中放下拉菜單-->
 <div class="row" style="margin-top:20px">
  <ul class="nav nav-tabs">
   <li><a href="#">雪碧圖</a></li>
   <li class="active"><a href="#">可樂</a></li>
   <li><a href="#">coffee</a></li>
   <li>
    <a href="#" data-toggle="dropdown">綠茶 
     <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
     <li><a href="#">html</a></li>
     <li><a href="#">css</a></li>
     <li><a href="#">js</a></li>
    </ul>
   </li>
  </ul>
 </div>
</div>

效果圖：

選項卡：

<!--
 1.導(dǎo)航對應(yīng)的所有內(nèi)容需要放在一個class為tab-content的層里；
 2.對應(yīng)的每個內(nèi)容塊都要加上tab-pane的class，且激活的內(nèi)容塊加上active的class
 3.給每一個導(dǎo)航的a標(biāo)簽添加data-toggle="tab"；
 4.給每一個內(nèi)容塊添加一個id，和選項卡的錨點對應(yīng)
 -->
<div class="container">
 <div class="row">
  <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">coffee</a></li>
  </ul>
  <div class="tab-content">
   <div id="tab1" class="tab-pane active">html</div>
   <div id="tab2" class="tab-pane">css</div>
   <div id="tab3" class="tab-pane">js</div>
  </div> 
 </div>
</div>

效果圖：