1.按钮
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>start</title>
6 <link href="../CSS/bootstrap.min.css" rel="stylesheet" type="text/css">
7 <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
8 <script type="text/javascript" src="../js/bootstrap.js"></script>
9 <meta name="viewport" content="width=device-width,initial-scale=1"/>
10 <!--[if lt IE 9]>
11 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
12 <![endif]-->
13 </head>
14 <body>
15 <a class="btn btn-primary" href="#"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>用户</a>
16 </body>
17 </html>
2.按钮群组
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>start</title>
6 <link href="../CSS/bootstrap.min.css" rel="stylesheet" type="text/css">
7 <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
8 <script type="text/javascript" src="../js/bootstrap.js"></script>
9 <meta name="viewport" content="width=device-width,initial-scale=1"/>
10 <!--[if lt IE 9]>
11 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
12 <![endif]-->
13 </head>
14 <body>
15 <div class="container">
16 <div class="btn-group">
17 <button class="btn btn-default" type="button">左对齐</button>
18 <button class="btn btn-default" type="button">居中</button>
19 <button class="btn btn-default" type="button">右对齐</button>
20 </div>
21 </div>
22 </body>
23 </html>
3.带下拉菜单的按钮
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>start</title>
6 <link href="../CSS/bootstrap.min.css" rel="stylesheet" type="text/css">
7 <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
8 <script type="text/javascript" src="../js/bootstrap.js"></script>
9 <meta name="viewport" content="width=device-width,initial-scale=1"/>
10 <!--[if lt IE 9]>
11 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
12 <![endif]-->
13 </head>
14 <body>
15 <div class="container">
16 <h1 class="page-header">按钮<small>带有下拉的按钮</small></h1>
17 <div class="dropdown">
18 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" >字体<span class="caret"></span></button>
19 <ul class="dropdown-menu">
20 <li><a href="#">黑体</a></li>
21 <li><a href="#">黑体</a></li>
22 <li><a href="#">黑体</a></li>>
23 </ul>
24 </div>
25 </div>
26 </body>
27 </html>
4.导航
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>start</title>
<link href="../CSS/bootstrap.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1 class="page-header">导航</h1>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li ><a href="#">Profile</a></li>
<li ><a href="#">Messages</a></li>
</ul>
</div>
</body>
</html>
5.导航菜单
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <title>start</title>
7 <link href="../CSS/bootstrap.min.css" rel="stylesheet" type="text/css">
8 <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
9 <script type="text/javascript" src="../js/bootstrap.js"></script>
10 <meta name="viewport" content="width=device-width, initial-scale=1">
11 <!--[if lt IE 9]>
12 <script src="../js/html5shiv.min.js"></script>
13 <script src="../js/html5shiv.min.js"></script>
14 <![endif]-->
15 </head>
16 <body>
17 <nav class="navbar navbar-default navbar-fixed-top">
18 <div class="container-fluid">
19 <div class="navbar-header">
20 <a class="navbar-brand" href="#">出驾</a>
21 </div>
22 <ul class="nav navbar-nav">
23 <li class="active"><a href="#">链接1</a></li>
24 <li ><a href="#">链接2</a></li>
25 <li class="dropdown">
26 <a href="#" type="button" class="dropdown-toggle" data-toggle="dropdown">下拉菜单<span class="caret"></span></a>
27 <ul class="dropdown-menu">
28 <li><a href="#">选项1</a></li>
29 <li><a href="#">选项2</a></li>
30 <li><a href="#">选项3</a></li>
31 </ul>
32 </li>
33 </ul>
34 <form class="navbar-form navbar-left">
35 <div class="form-group">
36 <input type="text" class="form-control" placeholder="Search">
37 </div>
38 <button type="submit" class="btn btn-default">提交</button>
39 </form>
40 <ul class="nav navbar-nav navbar-right">
41 <li><a href="#">链接3</a></li>
42 <li class="dropdown">
43 <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜单<span class="caret"></span></a>
44 <ul class="dropdown-menu">
45 <li><a href="#">选项1</a></li>
46 <li><a href="#">选项2</a></li>
47 <li class="divider"></li>
48 <li><a href="#">选项3</a></li>
49 </ul>
50 </li>
51 </ul>
52 </div>
53 </nav>
54 </body>
55 </html>
