說明：
1. 響應式導航欄，就是右上角的三道杠，點一下下方出現隱藏的導航欄。如果屏幕夠大就顯示所有的導航選項，如果屏幕小比如手機，就顯示部分，剩下的放到三道杠里隱藏。
2. 外面套一個大的div，其實建議用nav標簽，語義化一點唄！類名是navbar，說明這是個導航條，如果不帶，后面的內容會移上來。navbar-default這是個皮膚，默認的那種，不帶難看。
3. 里面分兩部分，首先是navbar-header，這個是主頁選項專用，里面放個navbar-brand顯示字體會大一點。下面呢個button就是右上角的三道杠按鈕，里面的類navbar-toggle是給這個button加個樣式，讓他處於導航條的右邊，不加的話是呢個熊樣你可以試試。data-toggle="collapse"跟下拉菜單data-toggle="dropdown"一個尿性，表明這個是三條杠導航。data-target="#shownav"指定點擊三道杠后彈出啥玩意，跟幻燈片輪播里的指定哪個div里的圖片，作用相同。后面的三個span就是畫了三道杠。這樣這個三道杠button就做好了，真特娘的累！
4. 繼續，下面是包含需要隱藏的導航選項的ul，id="shownav"就是給上面的data-target用的，表示點一下三道杠出現這個ul。nav navbarnav是導航條的類，不想解釋了。。collapse類是指這個ul是默認隱藏的，在點三道杠之前別特么給我出來！navbar-collapse是屏幕大的時候需要顯示這些隱藏的導航選項，如果不加，大屏的時候就不顯示了，只能小屏的時候點三道杠才顯示。
5. ok，這樣整個響應式導航就做完了。
效果圖：
大屏幕：
小屏幕：
代碼（需要先引入bootstrap和jquey）：
1 <div class="navbar navbar-default"> 2 <div class="navbar-header"> 3 <a class="navbar-brand" href="">主頁</a> 4 <button class="navbar-toggle" data-toggle="collapse" data-target="#shownav"> 5 <span class="icon-bar"></span> 6 <span class="icon-bar"></span> 7 <span class="icon-bar"></span> 8 </button> 9 </div> 10 11 <ul id="shownav" class="nav navbar-nav collapse navbar-collapse"> 12 <li><a href="">電影</a></li> 13 <li><a href="">游戲</a></li> 14 <li><a href="">小說</a></li> 15 <li><a href="">音樂</a></li> 16 <li> 17 <a class="dropdown" data-toggle="dropdown" href="">其他<span class="caret"></span></a> 18 <ul class="dropdown-menu"> 19 <li><a href="">漫畫</a></li> 20 <li><a href="">軟件</a></li> 21 <li><a href="">視頻</a></li> 22 23 </ul> 24 </li> 25 </ul> 26 27 28 </div>
總結：真特娘的累！麻煩！這特娘的十幾個類啊！少一個都不行啊！我為啥不直接用jquery點擊隱藏ul再點擊顯示ul啊！加個屏幕大小判斷！明天研究一下！