BootStrap 响应式导航栏 

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1">
 6     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7     <title></title>
 8     <link rel="icon" href="img/favicon.ico"/>
 9     <link rel="stylesheet" href="css/bootstrap.css">
10     <link rel="stylesheet" href="css/intel.css">
11     <!--[if lt IE 9]>
12     <script src="js/html5shiv.min.js"></script>
13     <script src="js/respond.min.js"></script>
14     <![endif]-->
15     <style>
16         body{
17             margin-top:50px;
18             margin-bottom:50px;
19         }
20     </style>
21 </head>
22 <body>
23     <div class="navbar navbar-default navbar-fixed-top">
24         <div class="container">
25             <div class="navbar-header">
26                 <a href="#" class="navbar-brand"><!--商标-->
27                     <img src="img/logo.png"/>
28                 </a>
29                 <a href="#mymenu" class="navbar-toggle" data-toggle="collapse">
30                     <span class="icon-bar"></span>
31                     <span class="icon-bar"></span>
32                     <span class="icon-bar"></span>
33                 </a>
34             </div>
35             <div class="navbar-collapse collapse" id="mymenu">
36                 <ul class="nav navbar-nav">
37                     <li><a href="#">首页</a></li>
38                     <li class="active"><a href="#">新闻</a></li>
39                     <li><a href="#">产品</a></li>
40                     <li><a href="#">特色</a></li>
41                 </ul>
42                 <ul class="nav navbar-nav navbar-right">
43                     <li><a href="#">登录</a></li>
44                     <li><a href="#">注册</a></li>
45                 </ul>
46                 <form class="navbar-form navbar-right">
47                     <div class="form-group">
48                         <label for="kw" class="sr-only">搜索关键字</label>
49                         <input type="text" id="kw" placeholder="请输入关键字"/>
50                     </div>
51                 </form>
52             </div>
53         </div>
54     </div>
55     <div class="navbar navbar-inverse navbar-fixed-bottom">
56         <div class="container">
57             <div class="navbar-header">
58                 <a href="#" class="navbar-brand"><!--商标-->
59                     <img src="img/logo.png"/>
60                 </a>
61                 <a href="#mymenub" class="navbar-toggle" data-toggle="collapse">
62                     <span class="icon-bar"></span>
63                     <span class="icon-bar"></span>
64                     <span class="icon-bar"></span>
65                 </a>
66             </div>
67             <div class="navbar-collapse collapse" id="mymenub">
68                 <ul class="nav navbar-nav">
69                     <li><a href="#">首页</a></li>
70                     <li class="active"><a href="#">新闻</a></li>
71                     <li><a href="#">产品</a></li>
72                     <li><a href="#">特色</a></li>
73                 </ul>
74                 <ul class="nav navbar-nav navbar-right">
75                     <li><a href="#">登录</a></li>
76                     <li><a href="#">注册</a></li>
77                 </ul>
78                 <form class="navbar-form navbar-right">
79                     <div class="form-group">
80                         <label for="kwb" class="sr-only">搜索关键字</label>
81                         <input type="text" id="kwb" placeholder="请输入关键字"/>
82                     </div>
83                 </form>
84             </div>
85         </div>
86     </div>
87     <script src="js/jquery-1.11.3.js"></script><!--此处必须引入js文件，否则汉堡包按钮无法点击-->
88     <script src="js/bootstrap.js"></script><!--此处必须引入js文件，否则汉堡包按钮无法点击-->
89 </body>
90 </html>

以上代码效果图如下：

一、PC端效果：

 

二、平板（min-width:768px）中效果:

 

posted @ 2016-12-22 19:34  时间脱臼  阅读(114)  评论(0)    收藏  举报