bootstrap导航栏——带详细分析

 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>