bootstrap--导航条/路径导航、巨幕（banner）

bootstrap 导航条

1、navbar 声明导航条
2、navbar-default 声明默认的导航条样式
3、navbar-inverse 声明反白的导航条样式
4、navbar-static-top 去掉导航条的圆角
5、navbar-fixed-top 固定到顶部的导航条
6、navbar-fixed-bottom 固定到底部的导航条
7、navbar-header 申明logo的容器
8、navbar-brand 针对logo等固定内容的样式
11、nav navbar-nav 定义导航条中的菜单
12、navbar-form 定义导航条中的表单
13、navbar-btn 定义导航条中的按钮
14、navbar-text 定义导航条中的文本
9、navbar-left 菜单靠左
10、navbar-right 菜单靠右

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>bootstrap导航条/路径导航</title>
 9 
10     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
11     <script type="text/javascript" src="../js/bootstrap.min.js"></script>
12     <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
13 
14 </head>
15 <body>
16     <div class="navbar navbar-inverse navbar-static-top">
17         <div class="container">
18 
19             <div class="navbar-header">
20                 <button class="navbar-toggle" data-toggle="collapse" data-target="#togglemenu">  <!-- 固定写法，点击icon-bar，展示togglemenu隐藏的菜单-->
21                     <span class="icon-bar"></span>
22                     <span class="icon-bar"></span>
23                     <span class="icon-bar"></span>
24                 </button>
25                 <a href="#" class="navbar-brand">LOGO</a>
26             </div>
27 
28             <div class="collapse navbar-collapse" id="togglemenu">   <!--页面缩小，隐藏下列菜单-->
29                 <ul class="nav navbar-nav">
30                     <li><a href="#">首页</a></li>  <!--这里必须要用a标签包，不然样式不对-->
31                     <li><a href="#">公司新闻</a></li>
32                     <li><a href="#">行业动态</a></li>
33                     <li><a href="#">招贤纳才</a></li>
34                     <li><a href="#">关于我们</a></li>
35                 </ul>
36                <!-- <button class="btn btn-default navbar-btn">按钮</button>-->
37                 <form class="navbar-form navbar-right">
38                     <div class="form-group">
39                         <div class="input-group">
40                             <input type="text" name="" class="form-control">
41                             <div class="input-group-btn">
42                                 <div class="btn btn-default"><span class="glyphicon glyphicon-search"></span></div>
43                             </div>
44                         </div>
45                     </div>
46                 </form>
47             </div>
48 
49         </div>
50     </div>
51 
52     <br>
53     <br>
54     <div class="navbar navbar-default navbar-static-top">
55         <div class="container">
56             <div class="navbar-header">
57                 <a href="#" class="navbar-brand">LOGO</a>
58             </div>
59 
60             <ul class="nav navbar-nav">
61                 <li><a href="#">首页</a></li>  <!--这里必须要用a标签包，不然样式不对-->
62                 <li><a href="#">公司新闻</a></li>
63                 <li><a href="#">行业动态</a></li>
64                 <li><a href="#">招贤纳才</a></li>
65                 <li><a href="#">关于我们</a></li>
66             </ul>
67         </div>
68     </div>
69 
70     <br><br>
71     <!--路径导航：面包屑-->
72     <ol class="breadcrumb">
73           <li><a href="#">Home</a></li>
74           <li><a href="#">Library</a></li>
75           <li class="active">Data</li>
76     </ol>
77 </body>
78 </html>

 

 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>bootstrap巨幕（banner）</title>
 9 
10     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
11     <script type="text/javascript" src="../js/bootstrap.min.js"></script>
12     <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
13 
14 </head>
15 <body>
16     <div class="jumbotron">
17         <div class="container">
18             <h1>欢迎访问</h1>
19             <p>欢迎正文</p>
20         </div>
21     </div>
22 </body>
23 </html>

posted on 2020-01-04 10:33  cherry_ning  阅读(499)  评论(0)    收藏  举报

导航