1 <!DOCTYPE html> 2 <!-- 3 作者：1243860037@qq.com 4 時間：2018-03-23 5 描述： 6 7 8 bootstrap的響應式導航欄,根據頁面的大小變化， 9 1. 響應式導航欄，就是右上角的三道杠，點一下下方出現隱藏的導航欄。 10 如果屏幕夠大就顯示所有的導航選項，如果屏幕小比如手機，就顯示部分，剩下的放到三道杠里隱藏。 11 --> 12 <html> 13 <head> 14 <meta charset="utf-8"> 15 <title>Bootstrap 實例 - 響應式的導航欄</title> 16 <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"> 17 <script src="bootstrap-3.3.7-dist/js/jquery-3.3.1.min.js"></script> 18 <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> 19 </head> 20 <body> 21 <!--2. 外面套一個大的div，其實建議用nav標簽，語義化一點唄！類名是navbar，說明這是個導航條，如果不帶， 22 后面的內容會移上來。navbar-default這是個皮膚，默認的那種，不帶難看。--> 23 <nav class="navbar navbar-default" role="navigation"> 24 <div class="container-fluid"> 25 <!--里面分兩部分，首先是navbar-header，這個是主頁選項專用，里面放個navbar-brand顯示字體會大一點。--> 26 <div class="navbar-header"> 27 <a class="navbar-brand" href="#">菜鳥教程</a> <!--navbar-brand導航欄商標 logo--> 28 <!--下面button就是右上角的三道杠按鈕，里面的類navbar-toggle是給這個button加個樣式，讓他處於導航條的右邊，不加的話是呢個熊樣你可以試試。--> 29 <!--data-toggle="collapse"表示數據切換形式是collapse（折疊）。 data-target="#haha"表示數據目標是ID為haha的，與下面的ID=haha對應 --> 30 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#haha"> <!--與下面的div通過ID連接。 collapse ：折疊--> 31 <span class="sr-only">切換導航</span> <!--屏幕閱讀器使用，殘障人士靠聽--> 32 <span class="icon-bar"></span> 33 <span class="icon-bar"></span> <!--橫線--> 34 <span class="icon-bar"></span> 35 </button> 36 </div> 37 38 <!--collapse是指這個ul默認是隱藏的，navbar-collapse是屏幕大的時候需要顯示這些隱藏的導航選項，如果不加， 39 大屏的時候就不顯示了，只能小屏的時候點三道杠才顯示。--> 40 <div class="collapse navbar-collapse" id="haha"> 41 <ul class="nav navbar-nav"> 42 <li class="active"><a href="#">iOS</a></li> 43 <li><a href="#">SVN</a></li> 44 <li class="dropdown"> 45 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Java <b class="caret"></b></a> 46 <ul class="dropdown-menu"> 47 <li><a href="#">jmeter</a></li> 48 <li><a href="#">EJB</a></li> 49 <li><a href="#">Jasper Report</a></li> 50 <li class="divider"></li> 51 <li><a href="#">分離的鏈接</a></li> 52 <li class="divider"></li> 53 <li><a href="#">另一個分離的鏈接</a></li> 54 </ul> 55 </li> 56 </ul> 57 </div> 58 </div> 59 </nav> <!--語義化--> 60 61 </body> 62 </html>