如今瀏覽Web頁面的終端不在是一塵不變了，前面示例實現的導航條僅能適配于大屏幕的瀏覽器，但當瀏覽器屏幕變小的時候，就不適合了。因此響應式設計也就隨之而來。那么在一個響應式的Web頁面中，對于響應式的導航條也就非常的重要。例如Bootstrap框架官網的導航條：
（寬屏時效果）
（中屏時效果）
（窄屏時效果）
那么在這一節中，主要和大家探討如何使用Bootstrap框架實現響應式導航條效果。
先來看HTML結構見右側代碼區。
使用方法：
1、保證在窄屏時需要折疊的內容必須包裹在帶一個div內，并且為這個div加入collapse、navbar-collapse兩個類名。最后為這個div添加一個class類名或者id名。
2、保證在窄屏時要顯示的圖標樣式（固定寫法）：
<button class="navbar-toggle" type="button" data-toggle="collapse"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
3、并為button添加data-target=".類名/#id名"，究競是類名還是id名呢？由需要折疊的div來決定。如：
需要折疊的div代碼段：
<div class="collapse navbar-collapse" id="example">
<ul class="nav navbar-nav">
…
</ul>
</div>
窄屏時顯示的圖標代碼段：
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#example">
...
</button>
也可以這么寫，需要折疊的div代碼段：
<div class="collapse navbar-collapse example" > <ul class="nav navbar-nav"> … </ul> </div>
窄屏時要顯示的圖標：
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".example">
...
</button>
請驗證，完成請求
由于請求次數過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報