整理自慕課筆記

基礎(chǔ)樣式

導(dǎo)航對于一位前端人員來說并不陌生?？梢哉f導(dǎo)航是一個網(wǎng)站重要的元素組件之一，可以便于用戶查找網(wǎng)站所提供的各項功能服務(wù)。導(dǎo)航的制作方法也是千奇百怪，五花八門。在這一節(jié)中將向大家介紹如何使用Bootstrap框架制作各式各樣的導(dǎo)航。
Bootstrap框架中制作導(dǎo)航條主要通過“.nav”樣式。默認(rèn)的“.nav”樣式不提供默認(rèn)的導(dǎo)航樣式，必須附加另外一個樣式才會有效，比如“nav-tabs”、“nav-pills”之類

<ul class="nav nav-tabs">
  <li><a href="##">Home</a></li>
  <li><a href="##">CSS3</a></li>
  <li><a href="##">Sass</a></li>
  <li><a href="##">jQuery</a></li>
  <li><a href="##">Responsive</a></li>
</ul>

標(biāo)簽形tab導(dǎo)航

標(biāo)簽形導(dǎo)航，也稱為選項卡導(dǎo)航。特別是在很多內(nèi)容分塊顯示的時，使用這種選項卡來分組十分適合。
標(biāo)簽形導(dǎo)航是通過“nav-tabs”樣式來實現(xiàn)。在制作標(biāo)簽形導(dǎo)航時需要在原導(dǎo)航“nav”上追加此類名，如：

<ul class="nav nav-tabs">
   <li><a href="##">Home</a></li>
   <li><a href="##">CSS3</a></li>
   <li><a href="##">Sass</a></li>
   <li><a href="##">jQuery</a></li>
   <li><a href="##">Responsive</a></li>
</ul>

一般情況之下，選項卡教會有一個當(dāng)前選中項。其實在Bootstrap框架也相應(yīng)提供了。假設(shè)我們想讓“Home”項為當(dāng)前選中項，只需要在其標(biāo)簽上添加類名“class=”active””即可：

<ul class="nav nav-tabs">
   <li class="active"><a href="##">Home</a></li>
   …
</ul>

除了當(dāng)前項之外，有的選項卡還帶有禁用狀態(tài)，實現(xiàn)這樣的效果，只需要在標(biāo)簽項上添加“class=”disabled””即可：

<ul class="nav nav-tabs">
   <li class="active"><a href="##">Home</a></li>
   …
   <li class="disabled"><a href="##">Responsive</a></li>
</ul>

注意：我們看到的選項卡效果，點擊菜單項就可以切換內(nèi)容，如果要實現(xiàn)這樣的效果需要配合js插件，這部分將在后面的教程中會介紹。

膠囊形(pills)導(dǎo)航

膠囊形（pills）導(dǎo)航聽起來有點別扭，因為其外形看起來有點像膠囊形狀。但其更像我們平時看到的大眾形導(dǎo)航。當(dāng)前項高亮顯示，并帶有圓角效果。其實現(xiàn)方法和“nav-tabs”類似，同樣的結(jié)構(gòu)，只需要把類名“nav-tabs”換成“nav-pills”即可

<ul class="nav nav-pills">
   <li class="active"><a href="##">Home</a></li>
   <li><a href="##">CSS3</a></li>
   <li><a href="##">Sass</a></li>
   <li><a href="##">jQuery</a></li>
   <li class="disabled"><a href="##">Responsive</a></li>
</ul>

垂直堆疊的導(dǎo)航

在實際運用當(dāng)中，除了水平導(dǎo)航之外，還有垂直導(dǎo)航，就類似前面介紹的垂直排列按鈕一樣。制作垂直堆疊導(dǎo)航只需要在“nav-pills”的基礎(chǔ)上添加一個“nav-stacked”類名即可

<ul class="nav nav-pills nav-stacked">
   <li class="active"><a href="##">Home</a></li>
   <li><a href="##">CSS3</a></li>
   <li><a href="##">Sass</a></li>
   <li><a href="##">jQuery</a></li>
   <li class="disabled"><a href="##">Responsive</a></li>
</ul>

垂直堆疊導(dǎo)航與膠囊形導(dǎo)航相比，主要是讓導(dǎo)航項不浮動，讓其垂直排列，然后給相鄰導(dǎo)航項留有一定的間距。大家是否還記得，在下拉菜單一節(jié)中，下拉菜單組與組之間有一個分隔線。其實在垂直堆疊導(dǎo)航也具有這樣的效果，只需要添加在導(dǎo)航項之間添加<li class=”nav-divider”></li>即可：

<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="##">Home</a></li>
  <li><a href="##">CSS3</a></li>
  <li><a href="##">Sass</a></li>
  <li><a href="##">jQuery</a></li>
  <li class="nav-divider"></li>
  <li class="disabled"><a href="##">Responsive</a></li>
</ul>

或許你會問，如果我在”nav-tabs”上添加“nav-stacked”是不是也能實現(xiàn)垂直的標(biāo)簽選項導(dǎo)航呢？答案是：在bootstrap V2.x版本可以，但在Bootstrap V3.x版本將這個效果取消了，可能作者覺得垂直選擇項并不太常見，也不美觀吧。

自適應(yīng)導(dǎo)航

使用

自適應(yīng)導(dǎo)航指的是導(dǎo)航占據(jù)容器全部寬度，而且菜單項可以像表格的單元格一樣自適應(yīng)寬度。自適應(yīng)導(dǎo)航和前面使用“btn-group-justified”制作的自適應(yīng)按鈕組是一樣的。只不過在制作自適應(yīng)導(dǎo)航時更換了另一個類名“nav-justified”。當(dāng)然他需要和“nav-tabs”或者“nav-pills”配合在一起使用。如：

<ul class="nav nav-tabs nav-justified">
   <li class="active"><a href="##">Home</a></li>
   <li><a href="##">CSS3</a></li>
   <li><a href="##">Sass</a></li>
   <li><a href="##">jQuery</a></li>
   <li><a href="##">Responsive</a></li>
</ul>

實現(xiàn)原理

實現(xiàn)原理并不難，列表<ul>上設(shè)置寬度為“100%”，然后每個菜單項<li>設(shè)置了“display:table-cell”，讓列表項以模擬表格單元格的形式顯示

導(dǎo)航加下拉菜單（二級導(dǎo)航）

前面介紹的都是使用Bootstrap框架制作一級導(dǎo)航，但很多時候，在Web頁面中是離不開二級導(dǎo)航的效果。那么在Bootstrap框架中制作二級導(dǎo)航就更容易了。只需要將li當(dāng)作父容器，使用類名“dropdown”，同時在li中嵌套另一個列表ul，使用前面介紹下拉菜單的方法就可以：

<ul class="nav nav-pills">
   <li class="active"><a href="##">首頁</a></li>
   <li class="dropdown">
    <a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="##">CSS3</a></li>
      …
    </ul>
   </li>
   <li><a href="##">關(guān)于我們</a></li>
</ul>

面包屑式導(dǎo)航

面包屑(Breadcrumb)一般用于導(dǎo)航，主要是起的作用是告訴用戶現(xiàn)在所處頁面的位置（當(dāng)前位置）。在Bootstrap框架中面包屑也是一個獨立模塊組件

使用方法

使用方式就很簡單，為ol加入breadcrumb類：

<ol class="breadcrumb">
 <li><a href="#">首頁</a></li>
 <li><a href="#">我的書</a></li>
 <li class="active">《圖解CSS3》</li>
</ol>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論