一、導航條模板（官方文檔）

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

二、分析導航條模板結構

①navbar導航模塊 ，類navbar-default 表示默認樣式(灰白)，還可以是navbar-inverse（反色，黑白），兩種主題

class="navbar navbar-inverse"

②container-fluid 表示的是導航的內容容器是流式布局，如果設置成container就是響應式布局

③navbar-header是商標和切換按鈕部分，切換按鈕只有在一定屏幕下才會出現

④類名：collapsed 樣式

• data-toggle="collapse" 申明是什麽組件=collapse折疊組件（collapse是bootstrap的另外一個組件）
• data-target="#bs-example-navbar-collapse-1" 控制的目標元素=選擇器（與後面的id值相對於）
• 需要註意的是如果是超鏈接，可以把選擇器寫在href屬性裏，如下面這個例子：

<button data-toggle="collapse" data-target=".box">切換</button>
<a href=".box" data-toggle="collapse" >切換</a>
<div class="box">
    內容<br>
    內容<br>
    內容<br>
    內容<br>
    內容<br>
</div>

⑤其他的屬性像：aria-expanded="false" ，aria-* ，class="sr-only" 代表都是提供給屏幕閱讀器使用的（盲人閱讀器），可以考慮去掉這類屬性和類

⑥dropdown下拉菜單組件，navbar-form搜索表單區域，後面的一些都是相似的內容

三、精簡版導航條模板

<nav class="navbar navbar-inverse">
        <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="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">標題</a>
            </div>
            <!-- 鏈接、下拉菜單、搜索區域 -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <!-- 鏈接 -->
                    <li class="active"><a href="#">鏈接1</a></li>
                    <li><a href="#">鏈接2</a></li>
                    <!-- 下拉菜單 -->
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">
                            下拉菜單
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">系列1</a></li>
                            <li><a href="#">系列2</a></li>
                            <li><a href="#">系列3</a></li>
                            <li><a href="#">系列4</a></li>
                            <li><a href="#">系列5</a></li>
                        </ul>
                    </li>
                </ul>
                <!-- 表單區域 -->
                <form class="navbar-form navbar-left">
                    <div class="form-group"><input type="text" class="form-control" placeholder="Search"></div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
            </div>
        </div>
    </nav>

四、使用組件

①使用組件一般都是先分析組件的結構，然後分析選擇器，結合自己的需求，覆蓋樣式

②樣式的覆蓋，首先需要拷貝bootstrap的css源碼（比如這個導航條組件，你需要拷貝的是前綴是.navbar的那部分css樣式）

③然後需要正確定位到所有元素的選擇器，並且能保證優先級比源碼高，針對功能進行樣式的覆蓋

④最後必然會產生一些冗余的代碼，可以保留（為了以後補充一些功能），也可以選擇刪除（減少代碼，提高效率）

bootstrap導航條組件