BootStrap INTEL响应式导航栏demo 

 1 <div class="navbar navbar-inverse navbar-fixed-top">
 2         <div class="container">
 3             <div class="navbar-header">
 4                 <a href="#" class="navbar-brand"><!--商标-->
 5                     <span class="logo"></span>
 6                 </a>
 7                 <a href="#mymenu" class="navbar-toggle" data-toggle="collapse">
 8                     <span class="icon-bar"></span>
 9                     <span class="icon-bar"></span>
10                     <span class="icon-bar"></span>
11                 </a>
12             </div>
13             <div class="navbar-collapse collapse" id="mymenu">
14                 <ul class="nav navbar-nav">
15                     <li><a href="#">首页</a></li>
16                     <li><a href="#">新闻</a></li>
17                     <li class="active dropdown">
18                         <a href="#" data-toggle="dropdown">菜单 <span class="caret"></span></a>
19                         <ul class="dropdown-menu">
20                             <li><a href="#"></a>因特尔产品</li>
21                             <li class="divider"><a href="#">热点话题</a></li>
22                             <li><a href="#"></a>产品介绍</li>
23                             <li class="divider"><a href="#">热点话题</a></li>
24                             <li><a href="#"></a>产品介绍</li>
25                             <li class="divider"><a href="#">热点话题</a></li>
26                             <li><a href="#"></a>产品介绍</li>
27                         </ul>
28                     </li>
29                 </ul>
30                 <ul class="nav navbar-nav navbar-right">
31                     <li><a href="#">简体中文</a></li>
32                     <li>
33                         <a href="#" data-toggle="dropdown">登录 <span class="caret"></span></a>
34                         <div class="dropdown-menu">
35                             <div class="logoin_menu">
36                                 用户登录
37                             </div>
38                         </div>
39                     </li>
40                 </ul>
41                 <form class="navbar-form navbar-right">
42                     <div class="form-group has-feedback"><!--has-feedback配合form-control-feedback给搜索框右边添加图标-->
43                         <label for="kw" class="control-label sr-only">搜索关键字</label>
44                         <input class="form-control" type="text" id="kw" placeholder="请输入关键字"/>
45                         <span class="glyphicon glyphicon-search form-control-feedback"></span>
46                     </div>
47                 </form>
48                 <span class="navbar-text navbar-right">|</span>
49                 <a href="#" class="navbar-link navbar-text navbar-right">查找内容</a>
50             </div>
51         </div>
52     </div>

以上代码效果图如下：

posted @ 2016-12-23 10:35  时间脱臼  阅读(120)  评论(0)    收藏  举报