Bootstrap3.0--(導航條)

閱讀以前您也能夠到Bootstrap3.0入門學習系列導航中進行查看http://www.cnblogs.com/aehyok/p/3404867.html

本文主要來說解如下內容

1.默認的導航條

2.表單

3.按鈕

4.文本

5.非導航的連接

6.組件對齊

7.固定在頂部

8.固定在底部

9.靜止在頂部

10.反色的導航條

11.總結

默認的導航條

 導航條是在您的應用或網站中做爲導航標頭的響應式元組件。它們在移動設備上能夠摺疊（而且可開可關），且在可用的視口寬度增長時變爲水平展開模式。

定製摺疊模式與水平模式的閾值

根據你所放在導航條上的內容的長度，也許你須要調整導航條進入摺疊模式和水平模式的閾值。經過改變@grid-float-breakpoint變量的值或加入您本身的媒體查詢CSS代碼都可實現你的需求。

 <nav class="navbar navbar-default" role="navigation">
       <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div>
       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
         <li class="active"><a href="#">Link</a></li>
         <li><a href="#">Link</a></li>
         <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
           <li><a href="#">Action</a></li>
           <li><a href="#">Another action</a></li>
           <li><a href="#">Something else here</a></li>
           <li class="divider"></li>
           <li><a href="#">Separated link</a></li>
           <li class="divider"></li>
           <li><a href="#">One more separated link</a></li>
          </ul>
         </li>
        </ul>
        <form class="navbar-form navbar-left" role="search">
         <div class="form-group">
          <input type="text" class="form-control" placeholder="Search"> </div>
         <button type="submit" class="btn btn-default">Submit</button>
        </form>
        <ul class="nav navbar-nav navbar-right">
         <li><a href="#">Link</a></li>
         <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
           <li><a href="#">Action</a></li>
           <li><a href="#">Another action</a></li>
           <li><a href="#">Something else here</a></li>
           <li class="divider"></li>
           <li><a href="#">Separated link</a></li>
          </ul>
         </li>
        </ul>
       </div>
      </nav>

這段代碼有點長，先上點效果吧。

接下來慢慢的放縮瀏覽器，也就是讓瀏覽器的寬度小一些。

首先最外面的容器是nav標籤，並添加nav-bar樣式類，表示這裏面屬於導航條。

而後在瀏覽器放縮到必定程度的時候，能夠看到的Header。

     <div class="navbar-header">
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> <a class="navbar-brand" href="#">Brand</a> 
      </div>

按鈕標籤裏嵌套了三個span的icon。而後給與navbar-toggle樣式類和屬性collapse(收起)，點擊的時候目標爲data-target。

再接下來就比較簡單，嵌套了下拉菜單、form表單、再是下拉菜單。

加強導航條的可訪問性

要加強可訪問性，必定要給每一個導航條加上role="navigation"。

表單

 將表單放置於.navbar-form以內能夠呈現很好的垂直對齊，並在較窄的viewport中呈現摺疊狀態。使用對齊選項能夠肯定其在導航條上出現的位置。

 經過使用.navbar-form和 .form-inline共享了不少代碼。

     <nav = role=>        <form = role=>          <div =>            <input type= = placeholder=>          </div>          <button type= =>Submit</button>        </form>     </nav>

爲輸入框添加label標籤

若是你沒有爲輸入框添加label標籤，屏幕閱讀器將會遇到問題。對於導航條內的表單，能夠經過.sr-only class隱藏label標籤。

 

按鈕

對於不包含在<form>中的<button>元素，加上.navbar-btn這個class後可讓它在導航條裏垂直居中。

<button type= =>Sign </button>

 

文本

  把文本包裹在.navbar-text中時，爲了有正確的行距和顏色，一般使用<p>標籤。

<p =>Signed   Mark Otto</p>

非導航的連接

或許你但願在標準的導航組件以外添加標準連接，那麼，使用.navbar-link class可讓連接有正確的默認顏色和反色。

<p =>Signed   <a href= =>Mark Otto</a></p>

 

組件對齊

用.navbar-left或者.navbar-right工具類給導航連接、表單、按鈕或文本對齊。兩種類都用到在特定方向的CSS浮動樣式。例如，要對齊導航連接，就要把它們放在個分開的、應用了工具類的<ul>裏。

這些class是.pull-left和.pull-right的mixin版本，可是他們被限定在了媒體查詢中，這樣能夠更容易的在各類尺寸的屏幕上處理導航條組件。

固定在頂部

 添加.navbar-fixed-top可讓導航條固定在頂部。

     <nav = role=>        <form = role=>          <div =>            <input type= = placeholder=>          </div>          <button type= =>Submit</button>        </form>        <button type= =>Sign </button>     </nav>

須要爲body標籤設置內補（padding）

這個固定的導航條會遮住頁面上的其它內容，除非你給<body>的上方設置了padding。用你本身的值，或用下面給出的代碼均可以。提示：導航條的默認高度是50px。

body { padding-top: 70px; }

必定要放在Bootstrap CSS的核心文件以後。

固定在底部

 用.navbar-fixed-bottom代替。

     <nav = role=>        <form = role=>          <div =>            <input type= = placeholder=>          </div>          <button type= =>Submit</button>        </form>        <button type= =>Sign </button>     </nav>

須要爲body標籤設置內部（padding）

這個固定的導航條會遮住頁面上的其它內容，除非你給<body>底部設置了padding。用你本身的值，或用下面給出的代碼均可以。提示：導航條的默認高度是50px。

body { padding-bottom: 70px; }

必定要在加載Bootstrap CSS的核心後使用它。

靜止在頂部

 經過添加.navbar-static-top便可建立一個與頁面的導航條。它會隨着頁面向下滾動而消失。和.navbar-fixed-*類不一樣的是，你不用給body添加padding。

     <nav = role=>        <form = role=>          <div =>            <input type= = placeholder=>          </div>          <button type= =>Submit</button>        </form>        <button type= =>Sign </button>     </nav>

反色的導航條

 經過添加.navbar-inverse類能夠改變導航條的外觀。

     <nav = role=>        <form = role=>          <div =>            <input type= = placeholder=>          </div>          <button type= =>Submit</button>        </form>        <button type= =>Sign </button>     </nav>

總結

 一個導航條的學問，最主要就是開始的簡單案例，好好琢磨，多試試就能夠了，而後經過一些樣式類來改變樣式。

本文已更新至Bootstrap3.0入門學習系列http://www.cnblogs.com/aehyok/p/3404867.html