4.十二、Bootstrap V4自學之路-----組件---導航欄

基礎

這些是你開始使用導航條以前須要知道的東西：

• 導航條要求一個包裹的.navbar以及一個配色方案類（能夠是.navbar-default或者.navbar-inverse）。

• 當在一個導航條中使用多個組件時，必須用一些 對齊類 。

• 導航條以及它們的內容默認是流式的。使用可選的容器以限制它們的橫向寬度。

• 使用.pull-left和.pull-right以快速對齊子組件。

• 使用<nav>元素確保其易用性，或者，若是使用一個更經常使用的元素，好比說<div>，要在每一個導航條上添加一個role="navigation"屬性，面向使用輔助技術的用戶，把它明確地標示爲一個地標區域。、

PS：愈來愈喜歡這樣文檔對基礎的介紹了。

支持內容

導航欄內置支持少許的子組件。視你的須要混合以及配合下面功能：

• .navbar-brand 用於你的公司、產品名、項目名。

• .navbar-nav 用於全高度、輕量級的導航（包括支持彈出菜單）。

• .navbar-form 用於垂直居中的默認大小的輸入框和按鈕。

• .navbar-toggler 用於使用咱們的摺疊板插件，以及別的導航切換行爲。

這裏有一些示例，演示了全部的包含在一個默認的輕導航條中的子組件：

<nav class="navbar navbar-light bg-faded">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav 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" href="#">About</a>
    </li>
  </ul>
  <form class="form-inline navbar-form pull-right">
    <input class="form-control" type="text" placeholder="Search">
    <button class="btn btn-success-outline" type="submit">Search</button>
  </form>
</nav>

僞代碼上：

《nav class="navbar navbar-light bg-faded"》<br>
--| 《a class="navbar-brand" href="#"》<br>
--| 《ul class="nav navbar-nav"》<br>
--| --| 《li class="nav-item active"》<br>
--| --| --| 《a class="nav-link"》<br>
--| --| 《li class="nav-item"》<br>
--| --| --| 《a class="nav-link"》<br>
--| --| 《li class="nav-item"》<br>
--| --| --| 《a class="nav-link"》<br>
--| --| 《li class="nav-item"》<br>
--| --| --| 《a class="nav-link"》<br>
--| 《form class class="form-inline navbar-form pull-right"》<br>
--| --| 《input class="form-control" type="text"》<br>
--| --| 《button class="btn btn-success-outline"》<br>

配色方案

將導航條主題化從未如此容易，這要歸功於結合使用一個簡單的連接顏色修飾類以及background-color實用工具。換句話說，你能夠指定亮或暗、應用一個背景色。

<nav class="navbar navbar-dark bg-inverse">
   <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav 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" href="#">About</a>
    </li>
  </ul>
  <form class="form-inline navbar-form pull-right">
    <input class="form-control" type="text" placeholder="Search">
    <button class="btn btn-success-outline" type="submit">Search</button>
  </form>
</nav>

<nav class="navbar navbar-dark bg-primary">
   <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav 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" href="#">About</a>
    </li>
  </ul>
  <form class="form-inline navbar-form pull-right">
    <input class="form-control" type="text" placeholder="Search">
    <button class="btn btn-success-outline" type="submit">Search</button>
  </form>
</nav>

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
   <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav 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" href="#">About</a>
    </li>
  </ul>
  <form class="form-inline navbar-form pull-right">
    <input class="form-control" type="text" placeholder="Search">
    <button class="btn btn-success-outline" type="submit">Search</button>
  </form>
</nav>

容器

雖然這不是必需的，你能夠把一個導航條包裹在一個.container中，以在網頁中居中它，或者說在導航欄內部添加一個.container使內容居中。

<div class="container">
  <nav class="navbar navbar-light bg-faded" style="background-color: #2aabd2">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
</div>
          
<nav class="navbar navbar-light bg-faded" style="background-color: #2aabd2">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

PS：全部的DIV樣式border:1px solid red; 因此來看基本同樣，差異不大。

佈局

導航欄能夠靜態放置（這是它默認的行爲），或者固定在視口聽頂部或底部。

<nav class="navbar navbar-fixed-top navbar-light bg-faded" style="background-color: #2aabd2">
  <a class="navbar-brand" href="#">固定在頂部</a>
</nav>

          1
<br><br><br>1<br><br><br><br><br><br><br><br><br>
<br><br><br>1<br><br><br><br><br><br><br><br><br>
<br><br><br>1<br><br><br><br><br><br><br><br><br>
<br><br><br>1<br><br><br><br><br><br><br><br><br>
<br><br><br>1<br><br><br><br><br><br><br><br><br>
    1
<nav class="navbar navbar-fixed-bottom navbar-light bg-faded" style="background-color: #2aabd2">
  <a class="navbar-brand" href="#">固定在底部</a>
</nav>

PS：這裏要說明。我截圖用的是FF截屏插件，全頁面截圖。你們看底部顯示不是那麼ok。

可是事實上，他已經在個人屏幕最下方。而且當我滾動頁面時，頂部導航條和底部導航條都在我屏幕可視範圍的最高和最低處。

可摺疊的內容

咱們的摺疊塊插件容許你使用一個<button>或<a>以切換隱藏內容。

點擊三條槓，出現文本。

<div class="collapse" id="exCollapsingNavbar">
  <div class="bg-inverse p-a">  <!--BOOTSTRAP.CSS中 .p-a{padding: 1rem !important;} -->
    <h4>Collapsed content</h4>
    <span class="text-muted">Toggleable via the navbar brand.</span>
  </div>
</div>
<nav class="navbar navbar-light bg-faded">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
    &#9776;
  </button>
</nav>

製做更復雜的導航欄模式，好比說用在Bootstrap v3中，使用.navbar-togglebar-*類結合.navbar-toggler類。這些類覆蓋了咱們的響應式實用工具，從而只在內容知足顯示的時候顯示導航。

效果在lg-up時

效果在lg-down時

<nav class="navbar navbar-light bg-faded">
  <button class="navbar-toggler hidden-xl-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
    &#9776;
  </button>
  <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
    <a class="navbar-brand" href="#">Responsive navbar</a>
    <ul class="nav 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" href="#">About</a>
      </li>
    </ul>
  </div>
</nav>

PS：這個效果是依據 .hidden-*-up or down 自適應顯示。很贊！啃起來有點吃力...