1. Glyphicons字体图标
出于性能的考虑，所有图标都需要一个基类和对应每个图标的类。注意，为了设置正确的内补（padding），务必在图标和文本之间添加一个空格。图标类只能应用在不包含任何文本内容或子元素的元素上。
1 <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
这些图标可以应用到按钮、工具条中的按钮组、导航或输入框等地方。
1 <button type="button" class="btn btn-default" aria-label="Left Align"> 2 <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span> 3 </button> 4 5 <button type="button" class="btn btn-default btn-lg"> 6 <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star 7 </button>
2.下拉菜单
1 <!doctype html> 2 <html lang=‘zh-cn‘> 3 <head> 4 <title>Hello World!</title> 5 <link rel=‘stylesheet‘ href=‘css/bootstrap.min.css‘> 6 <script src=‘js/jquery2.min.js‘></script> //jquery必须在bootstrap.js之前引入 7 <script src=‘js/bootstrap.min.js‘></script> 8 </head> 9 10 <body> 11 <div class=‘dropdown‘> 12 <button class=‘btn btn-primary dropdown-toggle‘ data-toggle=‘dropdown‘ id=‘dropdownmenu‘>Dropdown //button作为下拉菜单触发器 13 <span class=‘caret‘></span> 14 </button> 15 <ul class=‘dropdown-menu‘> 16 <li class=‘dropdown-header‘>Number</li> //菜单标题 17 <li><a href=‘#‘>One</a></li> 18 <li class=‘disabled‘><a href=‘#‘>Two</a></li> //禁用菜单项 19 <li><a href=‘#‘>Three</a></li> 20 <li class=‘divider‘></li> //分隔线 21 <li><a href=‘#‘>Four</a></li> 22 23 </ul> 24 </div> 25 </body> 26 </html>
3.按钮组
通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为。
1 <!doctype html>
2 <html lang=‘zh-cn‘>
3 <head>
4 <title>Hello World!</title>
5 <link rel=‘stylesheet‘ href=‘css/bootstrap.min.css‘>
6 <script src=‘js/jquery2.min.js‘></script>
7 <script src=‘js/bootstrap.min.js‘></script>
8 </head>
9
10 <body>
11 //可以用btn-group-lg{sm,xs}控制按钮的大小，btn-group-vertical{justified}控制排列
12 <div class=‘btn-group‘>
13 <button class=‘btn btn-default‘>Left</button>
14 <button class=‘btn btn-default‘>Middle</button>
15 <button class=‘btn btn-default‘>Right</button>
16 <div class=‘btn-group‘>
17 <button class=‘btn btn-default dropdown-toggle‘ data-toggle=‘dropdown‘>Dropdown
18 <span class=‘caret‘></span>
19 </button>
20 <ul class=‘dropdown-menu‘>
21 <li><a href=‘#‘>One</a></li>
22 <li><a href=‘#‘>Two</a></li>
23 <li><a href=‘#‘>Three</a></li>
24 </ul>
25 </div>
26 </div>
27 <hr />
28 <div class=‘btn-group btn-group-vertical‘>
29 <button class=‘btn btn-primary‘>Top</button>
30 <button class=‘btn btn-primary‘>Middle</button>
31 <button class=‘btn btn-primary‘>Bottom</button>
32 </div>
33 </body>
34 </html>
4. 输入框组
通过在文本输入框<input>前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为.input-group赋予.input-group-addon类，可以给.form-control的前面或后面添加额外的元素。只支持<input>。额外的元素可以是单选框、多选框、按钮或下拉菜单。
1 <!doctype html> 2 <html lang=‘zh-cn‘> 3 <head> 4 <title>Hello World!</title> 5 <link rel=‘stylesheet‘ href=‘css/bootstrap.min.css‘> 6 <script src=‘js/jquery2.min.js‘></script> 7 <script src=‘js/bootstrap.min.js‘></script> 8 </head> 9 10 <body> 11 <div class=‘input-group‘> 12 <span class=‘input-group-addon‘>@</span> 13 <input type=‘text‘ class=‘form-control‘ placeholder=‘Username‘> 14 </div> 15 <div class=‘input-group‘> 16 <input type=‘text‘ class=‘form-control‘ placeholder="Recipient‘s username"> 17 <span class=‘input-group-addon‘>@example.com</span> 18 </div> 19 <div class=‘input-group‘> 20 <span class=‘input-group-addon‘>$</span> 21 <input type=‘text‘class=‘form-control‘> 22 <span class=‘input-group-addon‘>.00</span> 23 </div> 24 25 <div class=‘row‘> 26 <div class=‘col-lg-6‘> 27 <div class=‘input-group‘> 28 <span class=‘input-group-addon‘> 29 <input type=‘checkbox‘> 30 </span> 31 <input type=‘text‘ class=‘form-control‘> 32 </div> 33 </div> 34 <div class=‘col-lg-6‘> 35 <div class=‘input-group‘> 36 <span class=‘input-group-addon‘> 37 <button class=‘btn btn-default‘>Go!</button> 38 </span> 39 <input type=‘text‘ class=‘form-control‘ placeholder=‘Search for...‘> 40 </div> 41 </div> 42 </div> 43 </body> 44 </html>
5.导航
Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式。
1 <!doctype html> 2 <html lang=‘zh-cn‘> 3 <head> 4 <title>Hello World!</title> 5 <link rel=‘stylesheet‘ href=‘css/bootstrap.min.css‘> 6 <script src=‘js/jquery2.min.js‘></script> 7 <script src=‘js/bootstrap.min.js‘></script> 8 </head> 9 10 <body> 11 //标签页 12 <ul class=‘nav nav-tabs‘> 13 <li class=‘active‘><a href=‘#‘>Home</a></li> 14 <li><a href=‘#‘>Profile</a></li> 15 <li><a href=‘#‘>Messages</a></li> 16 </ul> 17 18 //胶囊式标签页 19 <ul class=‘nav nav-pills‘> 20 <li class=‘active‘><a href=‘#‘>Home</a></li> 21 <li><a href=‘#‘>Profile</a></li> 22 <li><a href=‘#‘>Messages</a></li> 23 </ul> 24 25 //垂直胶囊式标签页 26 <ul class=‘nav nav-pills nav-stacked‘> 27 <li class=‘active‘><a href=‘#‘>Home</a></li> 28 <li><a href=‘#‘>Profile</a></li> 29 <li><a href=‘#‘>Messages</a></li> 30 </ul> 31 32 //带下拉菜单的标签页 33 <ul class=‘nav nav-tabs‘> 34 <li class=‘active‘><a href=‘#‘>Home</a></li> 35 <li><a href=‘#‘>Profile</a></li> 36 <li class=‘dropdown‘> 37 <a class=‘dropdown-toggle‘ data-toggle=‘dropdown‘ href=‘#‘> 38 Dropdown <span class=‘caret‘></span> 39 </a> 40 <ul class=‘dropdown-menu‘> 41 <li><a href=‘#‘>One</a></li> 42 <li><a href=‘#‘>Two</a></li> 43 </ul> 44 </li> 45 </ul> 46 </body> 47 </html>
时间： 2024-10-09 05:55:04