默認(rèn)樣式的導(dǎo)航條

導(dǎo)航條是在您的應(yīng)用或網(wǎng)站中作為導(dǎo)航頁(yè)頭的響應(yīng)式基礎(chǔ)組件。它們?cè)谝苿?dòng)設(shè)備上可以折疊（并且可開(kāi)可關(guān)），且在視口（viewport）寬度增加時(shí)逐漸變?yōu)樗秸归_(kāi)模式。

兩端對(duì)齊的導(dǎo)航條導(dǎo)航鏈接已經(jīng)被棄用了。

導(dǎo)航條內(nèi)所包含元素溢出

由于 Bootstrap 并不知道你在導(dǎo)航條內(nèi)放置的元素需要占據(jù)多寬的空間，你可能會(huì)遇到導(dǎo)航條中的內(nèi)容折行的情況（也就是導(dǎo)航條占據(jù)兩行）。解決辦法如下：

• 減少導(dǎo)航條內(nèi)所有元素所占據(jù)的寬度。
• 在某些尺寸的屏幕上（利用 響應(yīng)式工具類）隱藏導(dǎo)航條內(nèi)的一些元素。
• 修改導(dǎo)航條在水平排列和折疊排列互相轉(zhuǎn)化時(shí)，觸發(fā)這個(gè)轉(zhuǎn)化的最小屏幕寬度值?？梢酝ㄟ^(guò)修改 @grid-float-breakpoint 變量實(shí)現(xiàn)，或者自己重寫相關(guān)的媒體查詢代碼，覆蓋 Bootstrap 的默認(rèn)值。

依賴 JavaScript 插件

如果 JavaScript 被禁用，并且視口（viewport）足夠窄，致使導(dǎo)航條折疊起來(lái)，導(dǎo)航條將不能被打開(kāi)，.navbar-collapse 內(nèi)所包含的內(nèi)容也將不可見(jiàn)。

響應(yīng)式導(dǎo)航條依賴 collapse 插件，定制 Bootstrap 的話時(shí)候必將其包含。

修改視口的閾值，從而影響導(dǎo)航條的排列模式

當(dāng)瀏覽器視口（viewport）的寬度小于 @grid-float-breakpoint 值時(shí)，導(dǎo)航條內(nèi)部的元素變?yōu)檎郫B排列，也就是變現(xiàn)為移動(dòng)設(shè)備展現(xiàn)模式；當(dāng)瀏覽器視口（viewport）的寬度大于 @grid-float-breakpoint 值時(shí)，導(dǎo)航條內(nèi)部的元素變?yōu)樗脚帕?，也就是變現(xiàn)為非移動(dòng)設(shè)備展現(xiàn)模式。通過(guò)調(diào)整源碼中的這個(gè)值，就可以控制導(dǎo)航條何時(shí)堆疊排列，何時(shí)水平排列。默認(rèn)值是 768px （小屏幕 -- 或者說(shuō)是平板 --的最小值，或者說(shuō)是平板）。

導(dǎo)航條的可訪問(wèn)性

務(wù)必使用 <nav> 元素，或者，如果使用的是通用的 <div> 元素的話，務(wù)必為導(dǎo)航條設(shè)置 role="navigation" 屬性，這樣能夠讓使用輔助設(shè)備的用戶明確知道這是一個(gè)導(dǎo)航區(qū)域。

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <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>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" 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" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

品牌圖標(biāo)

將導(dǎo)航條內(nèi)放置品牌標(biāo)志的地方替換為 <img> 元素即可展示自己的品牌圖標(biāo)。由于 .navbar-brand 已經(jīng)被設(shè)置了內(nèi)補(bǔ)（padding）和高度（height），你需要根據(jù)自己的情況添加一些 CSS 代碼從而覆蓋默認(rèn)設(shè)置。

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

表單

將表單放置于 .navbar-form 之內(nèi)可以呈現(xiàn)很好的垂直對(duì)齊，并在較窄的視口（viewport）中呈現(xiàn)折疊狀態(tài)。 使用對(duì)齊選項(xiàng)可以規(guī)定其在導(dǎo)航條上出現(xiàn)的位置。

注意，.navbar-form 和 .form-inline 的大部分代碼都一樣，內(nèi)部實(shí)現(xiàn)使用了 mixin。 某些表單組件，例如輸入框組，可能需要設(shè)置一個(gè)固定寬度，從而在導(dǎo)航條內(nèi)有合適的展現(xiàn)。

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

移動(dòng)設(shè)備上的注意事項(xiàng)

在移動(dòng)設(shè)備上，對(duì)于在 fixed 定位的元素內(nèi)使用表單控件的情況有一些注意事項(xiàng)。請(qǐng)參考我們提供的瀏覽器支持情況相關(guān)的文檔 。

為輸入框添加 label 標(biāo)簽

如果你沒(méi)有為輸入框添加 label 標(biāo)簽，屏幕閱讀器將會(huì)遇到問(wèn)題。對(duì)于導(dǎo)航條內(nèi)的表單，可以通過(guò)添加 .sr-only 類隱藏 label 標(biāo)簽。

按鈕

對(duì)于不包含在 <form> 中的 <button> 元素，加上 .navbar-btn 后，可以讓它在導(dǎo)航條里垂直居中。有一些對(duì)于為輔助設(shè)備提供可識(shí)別標(biāo)簽的方法，例如， aria-label、aria-labelledby 或者 title 屬性。如果這些方法都沒(méi)有，屏幕閱讀器將使用 placeholder 屬性（如果這個(gè)屬性存在的話），但是請(qǐng)注意，使用 placeholder 代替其他識(shí)別標(biāo)簽的方式是不推薦的。

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

基于情境的用法

就像標(biāo)準(zhǔn)的 按鈕類 一樣，.navbar-btn 可以被用在 <a> 和 <input> 元素上。然而，在 .navbar-nav 內(nèi)，.navbar-btn 和標(biāo)準(zhǔn)的按鈕類都不應(yīng)該被用在 <a> 元素上。

文本

把文本包裹在 .navbar-text 中時(shí)，為了有正確的行距和顏色，通常使用 <p> 標(biāo)簽。

<p class="navbar-text">Signed in as Mark Otto</p>

非導(dǎo)航的鏈接

或許你希望在標(biāo)準(zhǔn)的導(dǎo)航組件之外添加標(biāo)準(zhǔn)鏈接，那么，使用 .navbar-link 類可以讓鏈接有正確的默認(rèn)顏色和反色設(shè)置。

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

組件排列

通過(guò)添加 .navbar-left 和 .navbar-right 工具類讓導(dǎo)航鏈接、表單、按鈕或文本對(duì)齊。兩個(gè)類都會(huì)通過(guò) CSS 設(shè)置特定方向的浮動(dòng)樣式。例如，要對(duì)齊導(dǎo)航鏈接，就要把它們放在個(gè)分開(kāi)的、應(yīng)用了工具類的 <ul> 標(biāo)簽里。

這些類是 .pull-left 和 .pull-right 的 mixin 版本，但是他們被限定在了媒體查詢（media query）中，這樣可以更容易的在各種尺寸的屏幕上處理導(dǎo)航條組件。

向右側(cè)對(duì)齊多個(gè)組件

導(dǎo)航條目前不支持多個(gè) .navbar-right 類。為了讓內(nèi)容之間有合適的空隙，我們?yōu)樽詈笠粋€(gè) .navbar-right 元素使用負(fù)邊距（margin）。如果有多個(gè)元素使用這個(gè)類，它們的邊距（margin）將不能按照你的預(yù)期正常展現(xiàn)。

我們將在 v4 版本中重寫這個(gè)組件時(shí)重新審視這個(gè)功能。

固定在頂部

添加 .navbar-fixed-top 類可以讓導(dǎo)航條固定在頂部，還可包含一個(gè) .container 或 .container-fluid 容器，從而讓導(dǎo)航條居中，并在兩側(cè)添加內(nèi)補(bǔ)（padding）。

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

需要為 body 元素設(shè)置內(nèi)補(bǔ)（padding）

這個(gè)固定的導(dǎo)航條會(huì)遮住頁(yè)面上的其它內(nèi)容，除非你給 元素底部設(shè)置了 padding。用你自己的值，或用下面給出的代碼都可以。提示：導(dǎo)航條的默認(rèn)高度是 50px。

body { padding-top: 70px; }

固定在底部

添加 .navbar-fixed-bottom 類可以讓導(dǎo)航條固定在底部，并且還可以包含一個(gè) .container或 .container-fluid 容器，從而讓導(dǎo)航條居中，并在兩側(cè)添加內(nèi)補(bǔ)（padding）。

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

需要為 body 元素設(shè)置內(nèi)補(bǔ)（padding）

這個(gè)固定的導(dǎo)航條會(huì)遮住頁(yè)面上的其它內(nèi)容，除非你給 <body> 元素底部設(shè)置了 padding。用你自己的值，或用下面給出的代碼都可以。提示：導(dǎo)航條的默認(rèn)高度是 50px。

body { padding-bottom: 70px; }

靜止在頂部

通過(guò)添加 .navbar-static-top 類即可創(chuàng)建一個(gè)與頁(yè)面等寬度的導(dǎo)航條，它會(huì)隨著頁(yè)面向下滾動(dòng)而消失。還可以包含一個(gè) .container 或 .container-fluid 容器，用于將導(dǎo)航條居中對(duì)齊并在兩側(cè)添加內(nèi)補(bǔ)（padding）。

通過(guò)添加 .navbar-static-top 類即可創(chuàng)建一個(gè)與頁(yè)面等寬度的導(dǎo)航條，它會(huì)隨著頁(yè)面向下滾動(dòng)而消失。還可以包含一個(gè) .container 或 .container-fluid 容器，用于將導(dǎo)航條居中對(duì)齊并在兩側(cè)添加內(nèi)補(bǔ)（padding）。

與 .navbar-fixed-* 類不同的是，你不用給 body 添加任何內(nèi)補(bǔ)（padding）。

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    ...
  </div>
</nav>

反色的導(dǎo)航條

通過(guò)添加 .navbar-inverse 類可以改變導(dǎo)航條的外觀。

<nav class="navbar navbar-inverse">
  ...
</nav>