剛開始學的bootstrap都是網上的理論知識，實踐的時候才發覺根本就不是那麼回事，隻有嘗試過才知道什麼才是重點，下面詳細說一下響應式導航欄。（bootstrap3.0版本，在bootstrap4.0版本不生效）
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >看這裡</a>
</div>
<div id="navbar" class="navbar-collapse collapse" aria-expanded="false">
<ul class="nav navbar-nav">
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >首頁</a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >測試</a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >尾頁</a></li>
</ul>
</div>
</div>
</nav>
大螢幕下：
小螢幕下：
<nav>标簽中的樣式我就不多做解釋了，下面先看一下.navbar-header。該類不僅會使頭部的文字看起來大一些，而且也是導航欄的頭部，當小螢幕上時是唯一能夠顯示的導航欄内容之一。
botton按鈕定義的就是小螢幕下那個3根橫杠的東西。其樣式class=“navbar-toggle collapsed”是必不可少的。
navbar-toggle樣式是控制3根斑馬線的。
collapsed是為了響應折疊插件的。
data-toggle=“collapse”表明這個button是一個折疊控件，其折疊的内容指向data-target="#navbar"，即是id為navbar的内容。
aria-expanded=“false”表示初始控件是折疊的。
<div id="navbar" class="navbar-collapse collapse" aria-expanded="false">
這其中的nvabar-collapse是導航欄的折疊樣式，collapse這是表示初始時是折疊的，若沒有collapse樣式，那麼縮放後導航欄元素将是展開的。