bootstrap導航條、分頁導航

1、導航條：

在導航條(navbar)中有一個背景色、而且導航條可以是純鏈接（類似導航），也可以是表單，還有就是表單和導航一起結合等多種形式。

（1）基礎導航條：

使用方法： 在製作一個基礎導航條時，主要分以下幾步：

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

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

<div class="navbar navbar-default" role="navigation">

     <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="##">成功案例</a></li>

        <li><a href="##">關於我們</a></li>

     </ul>

</div>

導航條的顏色都是通過“.navbar-default”來進行控制

（2）爲導航條添加二級菜單、標題、狀態：

通過“navbar-header”和“navbar-brand”來實現在菜單前加上標題。

<div class="navbar navbar-default" role="navigation">

  　<div class="navbar-header">

  　    <a href="##" class="navbar-brand">慕課網</a>

  　</div>

    <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="##">成功案例</a></li>

       <li><a href="##">關於我們</a></li>

     </ul>

</div>

基礎導航條中對菜單提供了當前狀態，禁用狀態，懸浮狀態等效果，而且也可以帶有二級菜單的導航條。

<div class="navbar navbar-default" role="navigation">

  　<div class="navbar-header">

  　    <a href="##" class="navbar-brand">慕課網</a>

  　</div>

    <ul class="nav navbar-nav">

         <li class="active"><a href="##">網站首頁</a></li>

        <li class="dropdown">

          <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>

          <ul class="dropdown-menu">

            <li><a href="##">CSS3</a></li>

            <li><a href="##">JavaScript</a></li>

            <li class="disabled"><a href="##">PHP</a></li>

          </ul>

       </li>

       <li><a href="##">名師介紹</a></li>

       <li><a href="##">成功案例</a></li>

       <li><a href="##">關於我們</a></li>

    </ul>

</div>

（3）帶表單的導航條：

Bootstrap框架中提供了一個“navbar-form”，在navbar容器中放置一個帶有navbar-form類名的表單。

“navbar-left”讓表單左浮動，更好實現對齊。還提供了“navbar-right”樣式，讓元素在導航條靠右對齊。

<form action="##" class="navbar-form navbar-left" rol="search">

           <div class="form-group">

              <input type="text" class="form-control" placeholder="請輸入關鍵詞" />

           </div>

        <button type="submit" class="btn btn-default">搜索</button>

     </form>

（4）導航條中的按鈕、文本、鏈接：

框架提供了三種其他樣式：

• 導航條中的按鈕navbar-btn
• 導航條中的文本navbar-text
• 導航條中的普通鏈接navbar-link

但這三種樣式在框架中使用時受到一定的限制，需要和navbar-brand、navbar-nav配合起來使用。

而且對數量也有一定的限制，一般情況在使用一到兩個不會有問題，超過兩個就會有問題。

（5）固定導航條：

Bootstrap框架提供了兩種固定導航條的方式：

   ☑  .navbar-fixed-top：導航條固定在瀏覽器窗口頂部

   ☑  .navbar-fixed-bottom：導航條固定在瀏覽器窗口底部

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

從運行效果中大家不難發現，頁面主內容頂部和底部都被固定導航條給遮住了。

爲了避免固定導航條遮蓋內容，我們需要在body上做一些處理：

body {

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

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

}

（6）響應式導航條：

• 保證在窄屏時需要摺疊的內容必須包裹在帶一個div內，並且爲這個div加入collapse、navbar-collapse兩個類名。最後爲這個div添加一個class類名或者id名。
• 保證在窄屏時要顯示的圖標樣式（固定寫法）：

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

• 併爲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 class="navbar navbar-default" role="navigation">

  <div class="navbar-header">

     　<!-- .navbar-toggle樣式用於toggle收縮的內容，即nav-collapse collapse樣式所在元素 -->

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

         <span class="sr-only">Toggle Navigation</span>

         <span class="icon-bar"></span>

         <span class="icon-bar"></span>

         <span class="icon-bar"></span>

       </button>

       <!-- 確保無論是寬屏還是窄屏，navbar-brand都顯示 -->

       <a href="##" class="navbar-brand">慕課網</a>

  </div>

  <!-- 屏幕寬度小於768px時，div.navbar-responsive-collapse容器裏的內容都會隱藏，顯示icon-bar圖標，當點擊icon-bar圖標時，再展開。屏幕大於768px時，默認顯示。 -->

  <div class="collapse navbar-collapse navbar-responsive-collapse">

        <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="##">成功案例</a></li>

              <li><a href="##">關於我們</a></li> 

         </ul>

  </div>

</div>

（7）反色導航欄：

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

<div class="navbar  navbar-inverse" role="navigation">

<div class="nav bar-header">

      <a href="##" class="navbar-brand">慕課網</a>

</div>

<ul class="nav navbar-nav">

      <li class="active"><a href="">首頁</a></li>

      <li><a href="">教程</a></li>

      <li><a href="">關於我們</a></li>

</ul>

</div>

（8）分頁導航：——帶頁碼的

在Bootstrap框架中提供了兩種分頁導航：

   ☑   帶頁碼的分頁導航

   ☑   帶翻頁的分頁導航

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

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

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

• 通過“pagination-lg”讓分頁導航變大；
• 通過“pagination-sm”讓分頁導航變小：

（9）翻頁導航：

翻頁分頁導航和帶頁碼的分頁導航類似，爲ul標籤加入pager類：

<ul class="pager">

   <li><a href="#">&laquo;上一頁</a></li>

   <li><a href="#">下一頁&raquo;</a></li>

</ul>

默認情況之下，翻頁分頁導航是居中顯示，但有的時候我們需要一個居左，一個居右。

Bootstrap框架提供了兩個樣式：

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

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

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

2、標籤：

在Bootstrap框架中特意將這樣的效果提取出來成爲一個標籤組件，並且以“.label”樣式來實現高亮顯示。

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

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

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

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

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

  ☑   label-success：成功標籤，綠色

  ☑   label-info：信息標籤，淺藍色

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

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

3、徽章：

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

像標籤一樣，使用span標籤來製作，然後爲他加入badge類：

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

徽章配合導航一起用：

<div class="navbar navbar-default" role="navigation">

　<div class="navbar-header">

　       <a href="##" class="navbar-brand">慕課網</a>

　</div>

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

</div>

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

<ul class="nav nav-pills">

  <li class="active"><a href="#">Home <span class="badge">42</span></a></li>

   …

  <li><a href="#">Messages<span class="badge">3</span></a></li>

</ul>

<ul class="navnav-pills nav-stacked" style="max-width: 260px;">

<li class="active">

<a href="#">

  <span class="badge pull-right">42</span>

          Home

</a>

</li>

…

<li>

<a href="#">

    <span class="badge pull-right">3</span>

          Messages

</a>

</li>

</ul>

<button class="btnbtn-primary" type="button">

      Messages <span class="badge">4</span>

</button>