整理關(guān)于Bootstrap導(dǎo)航的慕課筆記

整理自慕課筆記

基礎(chǔ)樣式

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

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

<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>

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

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

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

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

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

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

膠囊形（pills）導(dǎo)航聽(tīng)起來(lái)有點(diǎn)別扭，因?yàn)槠渫庑慰雌饋?lái)有點(diǎn)像膠囊形狀。但其更像我們平時(shí)看到的大眾形導(dǎo)航。當(dāng)前項(xiàng)高亮顯示，并帶有圓角效果。其實(shí)現(xiàn)方法和“nav-tabs”類(lèi)似，同樣的結(jié)構(gòu)，只需要把類(lèi)名“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)航

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

<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)航項(xiàng)不浮動(dòng)，讓其垂直排列，然后給相鄰導(dǎo)航項(xiàng)留有一定的間距。大家是否還記得，在下拉菜單一節(jié)中，下拉菜單組與組之間有一個(gè)分隔線。其實(shí)在垂直堆疊導(dǎo)航也具有這樣的效果，只需要添加在導(dǎo)航項(xiàng)之間添加<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>

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

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

使用

自適應(yīng)導(dǎo)航指的是導(dǎo)航占據(jù)容器全部寬度，而且菜單項(xiàng)可以像表格的單元格一樣自適應(yīng)寬度。自適應(yīng)導(dǎo)航和前面使用“btn-group-justified”制作的自適應(yīng)按鈕組是一樣的。只不過(guò)在制作自適應(yīng)導(dǎo)航時(shí)更換了另一個(gè)類(lèi)名“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>

實(shí)現(xiàn)原理

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

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

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

<ul class="nav nav-pills">
   <li class="active"><a href="##">首頁(yè)</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)航，主要是起的作用是告訴用戶(hù)現(xiàn)在所處頁(yè)面的位置（當(dāng)前位置）。在Bootstrap框架中面包屑也是一個(gè)獨(dú)立模塊組件

使用方法

使用方式就很簡(jiǎn)單，為ol加入breadcrumb類(lèi)：

<ol class="breadcrumb">
 <li><a href="#">首頁(yè)</a></li>
 <li><a href="#">我的書(shū)</a></li>
 <li class="active">《圖解CSS3》</li>
</ol>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。