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>