第四十九节 jQuery之bootstrap导航条 

 1 <!-- bootstrap导航条
 2         1、navbar 申明导航条
 3         2、navbar-default 申明默认的导航条样式
 4         3、navbar-inverse 申明反白的导航条样式
 5         4、navbar-static-top 去掉导航条的圆角
 6         5、navbar-fixed-top 固定到顶部的导航条
 7         6、navbar-fixed-bottom 固定到底部的导航条
 8         7、navbar-header 申明logo的容器
 9         8、navbar-brand 针对logo等固定内容的样式
10         9、nav navbar-nav 定义导航条中的菜单
11         10、navbar-form 定义导航条中的表单
12         11、navbar-btn 定义导航条中的按钮
13         12、navbar-text 定义导航条中的文本
14         13、navbar-left 菜单靠左
15         14、navbar-right 菜单靠右 -->
16 <!DOCTYPE html>
17 <html lang="en">
18 <head>
19     <meta charset="UTF-8">
20     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
21     <title>Document</title>
22     <script type="text/javascript" src="../jquery-1.12.4.min.js"></script>
23     <script type="text/javascript" src="./js/bootstrap.min.js"></script>
24     <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
25 </head>
26 <body>
27     <div class="navbar navbar-inverse navbar-static-top">
28         <div class="container">
29             <!-- 定义logo -->
30             <div class="navbar-header">
31                 <button class="navbar-toggle" data-toggle="collapse" data-target="#mymenu">
32                     <span class="icon-bar"></span>
33                     <span class="icon-bar"></span>
34                     <span class="icon-bar"></span>
35                 </button>
36                 <a href="#" class="navbar-brand">LOGO</a>
37             </div>
38             
39             <div class="collapse navbar-collapse" id="mymenu">
40                 <!-- 定义菜单 -->
41                 <ul class="nav navbar-nav">
42                     <li class="active"><a href="#">首页</a></li>
43                     <li><a href="#">公司简介</a></li>
44                     <li><a href="#">解决方案</a></li>
45                 </ul>
46                 
47                 <!-- 定义菜单里的表单 -->
48                 <form class="navbar-form navbar-right">
49                     <div class="form-group">
50                         <div class="input-group">
51                             <input type="text" name="" class="form-control">
52                             <span class="input-group-btn">
53                                 <button class="btn btn-default">
54                                     <span class="glyphicon glyphicon-search"></span>
55                                 </button>
56                             </span>
57                         </div>
58                     </div>
59                 </form>
60             </div>
61         </div>
62     </div>
63 </body>
64 </html>

 

posted @ 2020-03-16 20:51  kog_maw  阅读(145)  评论(0)    收藏  举报