Bootstrap 功能強(qiáng)大的響應(yīng)式導(dǎo)航標(biāo)題和導(dǎo)航欄的文檔和示例。包括對(duì)品牌，導(dǎo)航等的支持，包括對(duì)我們的折疊插件的支持。

怎么運(yùn)行的

以下是開始使用導(dǎo)航欄之前需要了解的內(nèi)容：

• 導(dǎo)航欄需要用.navbar-expand{-sm|-md|-lg|-xl}包裝.navbar的響應(yīng)倒塌和顏色方案的類。

• 導(dǎo)航欄及其內(nèi)容默認(rèn)為流暢的。使用可選容器限制其水平寬度。

• 使用我們的間距和柔性工具類來(lái)控制 navbars 中的間距和對(duì)齊。

• 導(dǎo)航欄默認(rèn)情況下是響應(yīng)式的，但您可以輕松修改它們來(lái)改變它。響應(yīng)行為取決于我們的 Collapse JavaScript 插件。

• 打印時(shí)，導(dǎo)航欄默認(rèn)為隱藏狀態(tài)。強(qiáng)制他們打印通過(guò)添加.d-print到.navbar。請(qǐng)參閱顯示實(shí)用程序類。

• 確保使用<nav>元素的可訪問(wèn)性，或者如果使用更通用的元素，如<div>，請(qǐng)將每個(gè)導(dǎo)航欄添加role="navigation"為明確標(biāo)識(shí)為輔助技術(shù)用戶的地標(biāo)區(qū)域。

請(qǐng)閱讀有關(guān)支持的子組件的示例和列表。

支持的內(nèi)容

Navbars 內(nèi)置了對(duì)少數(shù)子組件的支持。根據(jù)需要選擇：

• .navbar-brand 為您的公司，產(chǎn)品或項(xiàng)目名稱。

• .navbar-nav 用于全高和輕量級(jí)導(dǎo)航（包括對(duì)下拉菜單的支持）。

• .navbar-toggler 用于我們的折疊插件和其他導(dǎo)航切換行為。

• .form-inline 用于任何形式控制和操作。

• .navbar-text 用于添加垂直居中的文本字符串。

• .collapse.navbar-collapse 通過(guò)父斷點(diǎn)來(lái)分組和隱藏導(dǎo)航欄內(nèi)容。

下面是一個(gè)響應(yīng)式光主題導(dǎo)航欄中包含的所有子組件的示例，該導(dǎo)航欄在lg（大）斷點(diǎn)處自動(dòng)崩潰。

<nav class="navbar navbar-expand-lg navbar-light bg-light">  <a class="navbar-brand" href="#">Navbar</a>  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">    <span class="navbar-toggler-icon"></span>  </button>  <div class="collapse navbar-collapse" id="navbarSupportedContent">    <ul class="navbar-nav mr-auto">      <li class="nav-item active">        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>      </li>      <li class="nav-item">        <a class="nav-link" href="#">Link</a>      </li>      <li class="nav-item dropdown">        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown        </a>        <div class="dropdown-menu" aria-labelledby="navbarDropdown">          <a class="dropdown-item" href="#">Action</a>          <a class="dropdown-item" href="#">Another action</a>          <div class="dropdown-divider"></div>          <a class="dropdown-item" href="#">Something else here</a>        </div>      </li>      <li class="nav-item">        <a class="nav-link disabled" href="#">Disabled</a>      </li>    </ul>    <form class="form-inline my-2 my-lg-0">      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>    </form>  </div></nav>

本例使用的顏色（bg-light）和間距（my-2，my-lg-0，mr-sm-0，my-sm-0）的工具類。

品牌

.navbar-brand可應(yīng)用于大部分元素，但是錨效果最好的一些元素可能需要的工具類或自定義樣式。

<!-- As a link --><nav class="navbar navbar-light bg-light">  <a class="navbar-brand" href="#">Navbar</a></nav><!-- As a heading --><nav class="navbar navbar-light bg-light">  <span class="navbar-brand mb-0 h1">Navbar</span></nav>

將圖像添加到.navbar-brand可能總是需要自定義樣式或?qū)嵱贸绦虿拍苓m當(dāng)調(diào)整大小。下面是一些要演示的示例。

<!-- Just an image --><nav class="navbar navbar-light bg-light">  <a class="navbar-brand" href="#">    <img src="/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">  </a></nav>

<!-- Image and text --><nav class="navbar navbar-light bg-light">  <a class="navbar-brand" href="#">    <img src="/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap  </a></nav>

NAV

Navbar 導(dǎo)航鏈接基于我們的.nav選項(xiàng)和他們自己的修飾符類，并且需要使用切換器類來(lái)提供正確的響應(yīng)式樣式。導(dǎo)航欄中的導(dǎo)航也將越來(lái)越占用盡可能多的水平空間，以保持導(dǎo)航欄內(nèi)容的安全對(duì)齊。

活動(dòng)狀態(tài).active- 指示當(dāng)前頁(yè)面可以直接應(yīng)用于.nav-links或其直接父級(jí).nav-item。

<nav class="navbar navbar-expand-lg navbar-light bg-light">  <a class="navbar-brand" href="#">Navbar</a>  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">    <span class="navbar-toggler-icon"></span>  </button>  <div class="collapse navbar-collapse" id="navbarNav">    <ul class="navbar-nav">      <li class="nav-item active">        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>      </li>      <li class="nav-item">        <a class="nav-link" href="#">Features</a>      </li>      <li class="nav-item">        <a class="nav-link" href="#">Pricing</a>      </li>      <li class="nav-item">        <a class="nav-link disabled" href="#">Disabled</a>      </li>    </ul>  </div></nav>

而且因?yàn)槲覀優(yōu)閷?dǎo)航使用類，所以如果您愿意，可以完全避免使用基于列表的方法。

<nav class="navbar navbar-expand-lg navbar-light bg-light">  <a class="navbar-brand" href="#">Navbar</a>  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">    <span class="navbar-toggler-icon"></span>  </button>  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">    <div class="navbar-nav">      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>      <a class="nav-item nav-link" href="#">Features</a>      <a class="nav-item nav-link" href="#">Pricing</a>      <a class="nav-item nav-link disabled" href="#">Disabled</a>    </div>  </div></nav>

您也可以在導(dǎo)航欄導(dǎo)航中使用下拉菜單。下拉菜單需要用于定位的纏繞元件，所以一定要使用單獨(dú)的和嵌套的元素.nav-item和.nav-link，如下所示。

<nav class="navbar navbar-expand-lg navbar-light bg-light">  <a class="navbar-brand" href="#">Navbar</a>  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">    <span class="navbar-toggler-icon"></span>  </button>  <div class="collapse navbar-collapse" id="navbarNavDropdown">    <ul class="navbar-nav">      <li class="nav-item active">        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>      </li>      <li class="nav-item">        <a class="nav-link" href="#">Features</a>      </li>      <li class="nav-item">        <a class="nav-link" href="#">Pricing</a>      </li>      <li class="nav-item dropdown">        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link        </a>        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">          <a class="dropdown-item" href="#">Action</a>          <a class="dropdown-item" href="#">Another action</a>          <a class="dropdown-item" href="#">Something else here</a>        </div>      </li>    </ul>  </div></nav>

形式

使用.form-inline在導(dǎo)航欄中放置各種表單控件和組件。

<nav class="navbar navbar-light bg-light">  <form class="form-inline">    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>  </form></nav>

根據(jù)需要將內(nèi)聯(lián)表單的內(nèi)容與實(shí)用程序?qū)R。

<nav class="navbar navbar-light bg-light justify-content-between">  <a class="navbar-brand">Navbar</a>  <form class="form-inline">    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>  </form></nav>

輸入組也可以工作：

<nav class="navbar navbar-light bg-light">  <form class="form-inline">    <div class="input-group">      <span class="input-group-addon" id="basic-addon1">@</span>      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">    </div>  </form></nav>

作為這些導(dǎo)航欄形式的一部分，也支持各種按鈕。這也是一個(gè)很好的提示，即垂直對(duì)齊工具可以用來(lái)對(duì)齊不同大小的元素。

<nav class="navbar navbar-light bg-light">  <form class="form-inline">    <button class="btn btn-outline-success" type="button">Main button</button>    <button class="btn btn-sm align-middle btn-outline-secondary" type="button">Smaller button</button>  </form></nav>

文本

導(dǎo)航欄可能會(huì)在.navbar-text幫助下包含一些文本。該類為文本字符串調(diào)整垂直對(duì)齊和水平間距。

<nav class="navbar navbar-light bg-light">  <span class="navbar-text">
    Navbar text with an inline element  </span></nav>

根據(jù)需要混合并匹配其他組件和實(shí)用程序。

<nav class="navbar navbar-expand-lg navbar-light bg-light">  <a class="navbar-brand" href="#">Navbar w/ text</a>  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">    <span class="navbar-toggler-icon"></span>  </button>  <div class="collapse navbar-collapse" id="navbarText">    <ul class="navbar-nav mr-auto">      <li class="nav-item active">        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>      </li>      <li class="nav-item">        <a class="nav-link" href="#">Features</a>      </li>      <li class="nav-item">        <a class="nav-link" href="#">Pricing</a>      </li>    </ul>    <span class="navbar-text">
      Navbar text with an inline element    </span>  </div></nav>

配色方案

由于主題類和background-color實(shí)用程序的組合，導(dǎo)航導(dǎo)航欄從未如此簡(jiǎn)單。選擇.navbar-light用于淺色背景色或.navbar-dark用于深色背景色。然后，使用.bg-*實(shí)用程序自定義

<nav class="navbar navbar-dark bg-dark">  <!-- Navbar content --></nav><nav class="navbar navbar-dark bg-primary">  <!-- Navbar content --></nav><nav class="navbar navbar-light" style="background-color: #e3f2fd;">  <!-- Navbar content --></nav>

容器

盡管這不是必需的，但您可以將導(dǎo)航欄包裝.container到一個(gè)頁(yè)面中，也可以在其中添加一個(gè)，以便僅將固定頂部導(dǎo)航欄或靜態(tài)頂部導(dǎo)航欄的內(nèi)容居中。

<div class="container">  <nav class="navbar navbar-expand-lg navbar-light bg-light">    <a class="navbar-brand" href="#">Navbar</a>  </nav></div>

當(dāng)容器在導(dǎo)航欄中時(shí)，其橫向填充將在低于指定.navbar-expand{-sm|-md|-lg|-xl}類別的斷點(diǎn)處移除。這可以確保在導(dǎo)航欄折疊時(shí)，我們不會(huì)在較低視口上不必要地加倍填充。

<nav class="navbar navbar-expand-lg navbar-light bg-light">  <div class="container">    <a class="navbar-brand" href="#">Navbar</a>  </div></nav>

放置

使用我們的位置公用程序?qū)?dǎo)航欄放置在非靜態(tài)位置。從固定到頂部，固定到底部或粘到頂部（與頁(yè)面滾動(dòng)直到到達(dá)頂部，然后停留在那里）。固定導(dǎo)航欄使用position: fixed，這意味著他們從 DOM 的正常流動(dòng)和拉可能需要自定義的 CSS（例如，padding-top上<body>），以防止重疊與其他元素。

另請(qǐng)注意，使用**，[在每個(gè)瀏覽器**中都不完全支持]（https://caniuse.com/#feat=css-sticky）。.sticky-top  position: sticky

<nav class="navbar navbar-light bg-light">  <a class="navbar-brand" href="#">Default</a></nav>

<nav class="navbar fixed-top navbar-light bg-light">  <a class="navbar-brand" href="#">Fixed top</a></nav>

<nav class="navbar fixed-bottom navbar-light bg-light">  <a class="navbar-brand" href="#">Fixed bottom</a></nav>

<nav class="navbar sticky-top navbar-light bg-light">  <a class="navbar-brand" href="#">Sticky top</a></nav>

響應(yīng)行為

當(dāng)他們的內(nèi)容在按鈕后面崩潰時(shí)，導(dǎo)航欄可以利用.navbar-toggler，.navbar-collapse和.navbar-expand{-sm|-md|-lg|-xl}類進(jìn)行更改。結(jié)合其他實(shí)用程序，您可以輕松選擇何時(shí)顯示或隱藏特定元素。

對(duì)于永不崩潰.navbar-expand的導(dǎo)航欄，請(qǐng)?jiān)趯?dǎo)航欄上添加該類。對(duì)于總是崩潰的導(dǎo)航欄，請(qǐng)勿添加任何.navbar-expand課程。

Toggler

Navbar 的切換器默認(rèn)是左對(duì)齊的，但是它們應(yīng)該像一個(gè).navbar-brand一樣遵循一個(gè)兄弟元素，它們會(huì)自動(dòng)對(duì)齊到最右邊。反轉(zhuǎn)你的標(biāo)記會(huì)顛倒切換器的位置。以下是不同切換樣式的示例。

沒(méi)有.navbar-brand顯示在最低的斷點(diǎn)：

<nav class="navbar navbar-expand-lg navbar-light bg-light">  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">    <span class="navbar-toggler-icon"></span>  </button>  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">    <a class="navbar-brand" href="#">Hidden brand</a>    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">      <li class="nav-item active">        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>      </li>      <li class="nav-item">        <a class="nav-link" href="#">Link</a>      </li>      <li class="nav-item">        <a class="nav-link disabled" href="#">Disabled</a>      </li>    </ul>    <form class="form-inline my-2 my-lg-0">      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>    </form>  </div></nav>

品牌名稱顯示在左側(cè)，右側(cè)顯示切換器：

<nav class="navbar navbar-expand-lg navbar-light bg-light">  <a class="navbar-brand" href="#">Navbar</a>  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">    <span class="navbar-toggler-icon"></span>  </button>  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">      <li class="nav-item active">        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>      </li>      <li class="nav-item">        <a class="nav-link" href="#">Link</a>      </li>      <li class="nav-item">        <a class="nav-link disabled" href="#">Disabled</a>      </li>    </ul>    <form class="form-inline my-2 my-lg-0">      <input class="form-control mr-sm-2" type="search" placeholder="Search">      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>    </form>  </div></nav>

在左邊有一個(gè)觸發(fā)器，右邊是品牌名稱：

<nav class="navbar navbar-expand-lg navbar-light bg-light">  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">    <span class="navbar-toggler-icon"></span>  </button>  <a class="navbar-brand" href="#">Navbar</a>  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">      <li class="nav-item active">        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>      </li>      <li class="nav-item">        <a class="nav-link" href="#">Link</a>      </li>      <li class="nav-item">        <a class="nav-link disabled" href="#">Disabled</a>      </li>    </ul>    <form class="form-inline my-2 my-lg-0">      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>    </form>  </div></nav>

外部?jī)?nèi)容

有時(shí)您想使用折疊插件觸發(fā)頁(yè)面上其他地方的隱藏內(nèi)容。因?yàn)槲覀兊牟寮m用于id和data-target匹配，這很容易完成！

<div class="pos-f-t">  <div class="collapse" id="navbarToggleExternalContent">    <div class="bg-dark p-4">      <h4 class="text-white">Collapsed content</h4>      <span class="text-muted">Toggleable via the navbar brand.</span>    </div>  </div>  <nav class="navbar navbar-dark bg-dark">    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">      <span class="navbar-toggler-icon"></span>    </button>  </nav></div>