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

基礎

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

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

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

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

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

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

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

支持內容

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

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

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

  • .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 自適應顯示。很贊!啃起來有點吃力...
相關文章
相關標籤/搜索