Bootstrap之導航條，分頁導航

導航條基礎

導航條（navbar）和上一節介紹的導航（nav），就相差一個字，多了一個“條”字。其實在Bootstrap框架中他們還是明顯的區別。在導航條(navbar)中有一個背景色、而且導航條可以是純鏈接（類似導航），也可以是表單，還有就是表單和導航一起結合等多種形式。

 

基礎導航條

使用方法：

在制作一個基礎導航條時，主要分以下幾步：

第一步：首先在制作導航的列表(<ul class=”nav”>)基礎上添加類名“navbar-nav”

第二步：在列表外部添加一個容器（div），並且使用類名“navbar”和“navbar-default”

 

為導航條添加標題、二級菜單及狀態

加入導航條標題

在Web頁面制作中，常常在菜單前面都會有一個標題（文字字號比其它文字稍大一些），其實在Bootstrap框架也為大家做了這方面考慮，其通過“navbar-header”和“navbar-brand”來實現。

注意：div 的類是 navbar-header，a 的類是 navbar-brand

二級菜單及狀態和導航一樣。

 

帶表單的導航條

要為導航條增加一個表單，比如搜索框，只需在 form 上設置一個 navbar-form 類，其他設置和表單一樣。

但是 按鈕 不再是 button 而是 a 了。

另外，在 form 上增添 navbar-left 和 navbar-right 可以讓表單左浮動或者右浮動

 

導航條中的按鈕、文本和鏈接

Bootstrap框架的導航條中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外，還可以使用其他元素。框架提供了三種其他樣式：

1、導航條中的按鈕navbar-btn

2、導航條中的文本navbar-text

3、導航條中的普通鏈接navbar-link

但這三種樣式在框架中使用時受到一定的限制，需要和navbar-brand、navbar-nav配合起來使用。而且對數量也有一定的限制，一般情況在使用一到兩個不會有問題，超過兩個就會有問題。

使用    .navbar-btn 向 不在 <form> 中的 <button> 元素添加按鈕，按鈕在導航欄上垂直居中。 .navbar-btn 可被使用在 <a> 和 <input> 元素上。

 

如果需要在導航中包含文本字符串，請使用 class  .navbar-text。這通常與 <p> 標簽一起使用，確保適當的前導和顏色。

如果只有一個文本的話貌似可以不需要 div ，但是如果多個文本想做成導航那樣，就需要 div 並且為 div 添加 .nav 和.navbar-nav

 

如果不想在常規的導航欄導航組件內使用標准的鏈接，那么請使用 class  . navbar-link 來為默認的和倒轉的導航欄選項添加適當的顏色

關於什么時候使用 div 包裹 p，參考上面。

 

另外， .navbar-left 和 .navbar-right 也可以用在 p 或者 div.navbar上面使其左右浮動

來自：      

http://www.w3cschool.cc/bootstrap/bootstrap-navbar.html   

  

固定導航條

很多情況之一，設計師希望導航條固定在瀏覽器頂部或底部，這種固定式導航條的應用在移動端開發中更為常見。

使用方法很簡單，只需要在制作導航條最外部容器navbar上追加對應的類名即可：

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
　…
</div>
<div class="content">我是內容</div>
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
　…
</div>

 

存在bug及解決方法：

從運行效果中大家不難發現，頁面主內容頂部和底部都被固定導航條給遮住了。為了避免固定導航條遮蓋內容，我們需要在body上做一些處理：

body {
  padding-top: 70px;/*有頂部固定導航條時設置*/
  padding-bottom: 70px;/*有底部固定導航條時設置*/
}

因為固定導航條默認高度是50px，我們一般設置padding-top和padding-bottom的值為70px，當然有的時候還是需要具體情況具體分析。

還有第二種方法，但是看起來比較復雜，沒細看。http://www.imooc.com/code/3123

 

響應式導航條

如今瀏覽Web頁面的終端不在是一塵不變了，前面示例實現的導航條僅能適配於大屏幕的瀏覽器，但當瀏覽器屏幕變小的時候，就不適合了。因此響應式設計也就隨之而來。那么在一個響應式的Web頁面中，對於響應式的導航條也就非常的重要。例如Bootstrap框架官網的導航條：

 

使用方法：

1、保證在窄屏時需要折疊的內容必須包裹在帶一個div內，並且為這個div加入collapse、navbar-collapse兩個類名。最后為這個div添加一個class類名或者id名。

 

2、保證在窄屏時要顯示的圖標樣式（固定寫法）：

<button class="navbar-toggle" type="button" data-toggle="collapse">
  <span class="sr-only">Toggle Navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

3、並為button添加data-target=".類名/#id名"，究競是類名還是id名呢？由需要折疊的div來決定。如：

需要折疊的div代碼段：

<div class="collapse navbar-collapse" id="example">
      <ul class="nav navbar-nav">
      …
      </ul>
</div>

窄屏時顯示的圖標代碼段：

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#example">
  ...
</button>

也可以這么寫，需要折疊的div代碼段：

<div class="collapse navbar-collapse example" >
      <ul class="nav navbar-nav">
      …
      </ul>
</div>

窄屏時要顯示的圖標：

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".example">
  ...
</button>

 

 

貌似 a 也可以在 button 前面？

 

另外，注意 data-target = "" 雙引號里面有 . 或者 #，視要折疊的 div 是用 類 還是用 id 決定。

 

反色導航條

反色導航條其實是Bootstrap框架為大家提供的第二種風格的導航條，與默認的導航條相比，使用方法並無區別，只是將navbar-deafult類名換成navbar-inverse。其變化只是導航條的背景色和文本做了修改。

 

分頁導航（帶頁碼的分頁導航）

分頁導航幾乎在哪個網站都可見。好的分頁導航能給用戶帶來更好的用戶體驗。在Bootstrap框架中提供了兩種分頁導航：

   ☑   帶頁碼的分頁導航

   ☑   帶翻頁的分頁導航

使用方法：

平時很多同學喜歡用div>a和div>span結構來制作帶頁碼的分頁導航。不過，在Bootstrap框架中使用的是ul>li>a這樣的結構，在ul標簽上加入pagination方法：

<ul class="pagination">
   <li><a href="#">&laquo;</a></li>
   <li><a href="#">1</a></li>
   <li><a href="#">2</a></li>
   <li><a href="#">3</a></li>
   <li><a href="#">4</a></li>
   <li><a href="#">5</a></li>
   <li><a href="#">&raquo;</a></li>
</ul>

運行效果：

 

注意：第一個頁左邊的那個《 是 &laquo;

          最后一頁右邊的 》是 $raquo;

          別忘了分號

最后一頁的禁用狀態是加了一個 disabled 類。

另外，li 中有 a 包裹住內容。

 

注意：要禁用當前狀態和禁用狀態不能點擊，我們還要依靠js來實現，或者將這兩狀態下的a標簽換成span標簽。

大小設置：

在Bootstrap框架中，也可以通過幾個不同的情況來設置其大小。類似於按鈕一樣：

1、通過“pagination-lg”讓分頁導航變大；

2、通過“pagination-sm”讓分頁導航變小：

 

分頁導航（翻頁分頁導航）

Bootstrap框架除了提供帶頁碼的分頁導航之外還提供了翻頁導航。這種分頁導航常常在一些簡單的網站上看到，比如說個人博客，雜志網站等。這種分頁導航是看不到具體的頁碼，只會提供一個“上一頁”和“下一頁”的按鈕。

使用方法：

在實際使用中，翻頁分頁導航和帶頁碼的分頁導航類似，為ul標簽加入pager類：

<ul class="pager">
   <li><a href="#">&laquo;上一頁</a></li>
   <li><a href="#">下一頁&raquo;</a></li>
</ul>

 

對齊樣式設置：

默認情況之下，翻頁分頁導航是居中顯示，如：

但有的時候我們需要一個居左，一個居右。Bootstrap框架提供了兩個樣式：

   ☑   previous：讓“上一步”按鈕居左

   ☑   next：讓“下一步”按鈕居右

具體使用的時候，只需要在li標簽上添加對應類名即可：

<ul class="pager">
   <li class="previous"><a href="#">&laquo;上一頁</a></li>
   <li class="next"><a href="#">下一頁&raquo;</a></li>
</ul>

實現原理：

實現原理很簡單，就是一個進行了左浮動，一個進行了右浮動。

 

狀態樣式設置：

和帶頁碼分頁導航一樣，如果在li標簽上添加了disabled類名的時候，分頁按鈕處於禁用狀態，但同樣不能禁止其點擊功能。你可以通過js來處理，或將a標簽換成span標簽。

<ul class="pager">
  <li class="disabled"><span>&laquo;上一頁</span></li>
  <li><a href="#">下一頁&raquo;</a></li>
</ul>

 

標簽

在一些Web頁面中常常會添加一個標簽用來告訴用戶一些額外的信息，比如說在導航上添加了一個新導航項，可能就會加一個“new”標簽，來告訴用戶。這是新添加的導航項。如下圖所示：

 

使用原理：

使用方法很簡單，你可以在使用span這樣的行內標簽：

<h3>Example heading <span class="label label-default">New</span></h3>

顏色樣式設置：

和按鈕元素button類似，label樣式也提供了多種顏色：

  ☑   label-deafult:默認標簽，深灰色

  ☑   label-primary：主要標簽，深藍色

  ☑   label-success:成功標簽，綠色

  ☑   label-in:信息標簽，淺藍色

  ☑   label-warning：警告標簽，橙色

  ☑   label-danger：錯誤標簽，紅色

主要是通過這幾個類名來修改背景顏色和文本顏色：

<span class="label label-default">默認標簽</span>
<span class="label label-primary">主要標簽</span>
<span class="label label-success">成功標簽</span>
<span class="label label-info">信息標簽</span>
<span class="label label-warning">警告標簽</span>
<span class="label label-danger">錯誤標簽</span>

 

徽章

 

在Bootstrap框架中，把這種效果稱作為徽章效果，使用“badge”樣式來實現。

 

使用方法：

使用方法，其實也沒什么太多可說的，你可以像標簽一樣，使用span標簽來制作，然后為他加入badge類：

<a href="#">Inbox <span class="badge">42</span></a>

 

可以將徽章與按鈕或者導航之類配合使用：

<ul class="nav navbar-nav">
         <li class="active"><a href="##">網站首頁</a></li>
         <li><a href="##">系列教程</a></li>
         <li><a href="##">名師介紹</a></li>
         <li><a href="##">成功案例<span class="badge">23</span></a></li>
         <li><a href="##">關於我們</a></li>
  </ul>

注意：span 內可以有數字

按鈕和膠囊形導航設置徽章：

另外，徽章在按鈕元素button和膠囊形導航nav-pills也可以有類似的樣式，只不過是顏色不同而已。

來自：http://www.imooc.com/code/3110 整理