1、導(dǎo)航

• 標簽頁
• 釋義：.nav-tabs類依賴 .nav 基類
• 示例

<ul class="nav nav-tabs" role="tablist">
      <li role="presentation" class="active"><a href="#">Home</a></li>
      <li role="presentation"><a href="#">Profile</a></li>
      <li role="presentation"><a href="#">Messages</a></li>
</ul>

• 效果圖

  
  

• 膠囊式標簽頁(.nav-pills)

• 示例

<ul class="nav nav-pills" role="tablist">
      <li role="presentation" class="active"><a href="#">Home</a></li>
      <li role="presentation"><a href="#">Profile</a></li>
      <li role="presentation"><a href="#">Messages</a></li>
</ul>

• 效果圖

  
  

• Note
  膠囊是標簽頁也是可以垂直方向堆疊排列的。只需添加 .nav-stacked 類

• 兩端對齊的標簽頁

• 示例

<ul class="nav nav-tabs nav-justified" role="tablist"> ...</ul>

2、導(dǎo)航條

• 默認導(dǎo)航條
• 示例

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <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 <span class="caret"></span></a>
                </li>
            </ul>
        </div>
    </div>
</nav>

• 效果圖

  
  

• 反色的導(dǎo)航條

• 釋義：通過添加 .navbar-inverse類可以改變導(dǎo)航條的外觀

• 示例

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

• 效果圖

  
  

• 固定在頂部

• 釋義：添加 .navbar-fixed-top 類可以讓導(dǎo)航條固定在頂部

• 固定在底部

• 釋義：添加 .navbar-fixed-bottom 類可以讓導(dǎo)航條固定在底部

• 這兩個都可以包含一個 .container 或 .container-fluid容器，從而讓導(dǎo)航條居中，并在兩側(cè)自動添加內(nèi)部（padding）

• 示例

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

• 靜止在頂部
• 釋義：通過添加 .navbar-static-top 類，創(chuàng)建一個與頁面等寬度的導(dǎo)航條，它會隨著頁面向下滾動而消失
• 示例

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

• 文本
• 釋義：可以把文本包裹在 .navbar-text中，為了有正確的行距和顏色，通常使用<p> 標簽
• 示例

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

3、路徑導(dǎo)航

• 釋義：在一個帶有層次的導(dǎo)航結(jié)構(gòu)中標明當前頁面的位置
• 示例

<ol class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">Library</a></li>
    <li class="active">Data</li>
</ol>

• 效果圖

  
  

• 注意點
  各路徑間的分隔符已經(jīng)通過 CSS 的 :before 和 content 屬性自動添加

4、注意點

• 使用 .navbar-link 類可以讓鏈接有正確的默認顏色和反色設(shè)置
• 對于不包含在 <form> 中的<button> 元素，加上 .navbar-btn 后，可以讓它在導(dǎo)航條里垂直居中