1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width,initial-scale=1.0,maxinum-scale=1.0,user-scalable=no"/>
7 <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css" />
8 <title></title>
9 <style></style>
10 </head>
11 <body>
13 <!--导航条 包含容器，而不是容器包含导航条->
14 <div class="navbar navbar-default">
15 <div>
16 <!--第一部分-->
17 <a href="" class="navbar-brand">
18 <img src="img/Jellyfish.jpg" style="width:25px"/>
19 </a>
20 <div class="navbar-header">
21 <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navdown" type="button">
22 <span class="icon-bar"></span>
23 <span class="icon-bar"></span>
24 <span class="icon-bar"></span>
25 </button>
26 </div>
27 <!--第二部分-->
28 <div id="navdown" class="collapse navbar-collapse">
29 <ul class="nav navbar-nav">
30 <li><a href="">首页</a></li>
31 <li><a href="">新闻</a></li>
32 <li class="dropdown">
33 <a href="" data-toggle="dropdown">
34 产品大全<span class="caret"></span>
35 </a>
36 <ul class="dropdown-menu">
37 <li><a href="">修手机</a></li>
38 <li><a href="">贴膜</a></li>
39 <li><a href="">代驾</a></li>
40 </ul>
41 </li>
42 <li><a href="">招聘</a></li>
43 <li><a href="">帮助</a></li>
44 </ul>
45 <!--第三部分-->
46 <a href="" class="navbar-right navbar-link navbar-text" style="margin-right:5px;">登录</a>
47 <span class="navbar-right navbar-text">|</span>
48 <a href="" class="navbar-right navbar-link navbar-text">注册</a>
49 <!--导航中表单-->
50 <form action="" class="navbar-right navbar-form">
51 <div class=" input-group">
52 <input type="text" id="kw" class="form-control"/>
53 <div class="input-group-addon">
54 <span class="glyphicon glyphicon-search "></span>
55 </div>
56 </div>
57 </form>
58 </div>
59 </div>
60 </div>
61 <script src="js/jquery.js"></script>
62 <script src="js/bootlint.js"></script>
63 <script src="js/bootstrap.js"></script>
64 <script>
65 bootlint.showLintReportForCurrentDocument([]);
66 </script>
67
68 </body>
69 </html>
