BootStrap一页通，样式+组件+插件
bootstrap是一种前端框架，实现美观的页面效果。
使用BootStrap的前期工作（注意顺序）：
<!DOCTYPT html>；因为Bootstrap用到了h5的特性，所以需要此步。
导入jQuery；bootstrap需要jQuery才能正常工作，故需要导入 jquery.min.js
导入Bootstrap的css；定义各种样式。
导入Bootstrap的js；产生交互效果。
最后直接套用Bootstrap的class即可，达到想要的效果。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Bootstrap的使用</title>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<body>
<button class="btn btn-success">Bootstrap</button>
</body>
</html>
1
基本样式
1. 按钮
- 按钮样式可用于：
- 按钮元素`<button>`
- 超链接`<a>`
- 按钮类型的input元素`<input type='button'>`
- 提交类型的input元素`<input type='submit'>`
- 重置类型的input元素`<input type='reset'>`
- 示例：
- 原始样式按钮
- 默认按钮
- 提交按钮
- 成功按钮
- 信息按钮
- 警告按钮
- 危险按钮
- 表现为链接
- 大按钮
- 小按钮
- 最小的的按钮
- 宽屏按钮
- 激活状态按钮
- 无效按钮
- 多种按钮样式混用
1
2
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>基本样式之一：按钮</title>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<body>
原始样式按钮：把button标签变为平面的样式，一般不用
<button class="btn">原始样式按钮</button>
<br>
默认按钮：无色按钮
<button class="btn btn-default">默认按钮</button>
<br>
提交按钮：用于提交数据
<button class="btn btn-primary">提交按钮</button>
<br>
成功按钮：一般用于一系列操作的最后一步，例如购物车最后付款
<button class="btn btn-success">成功按钮</button>
<br>
信息按钮：点击显示更多信息
<button class="btn btn-info">信息按钮</button>
<br>
警告按钮：一般用于修改行为
<button class="btn btn-warning">警告按钮</button>
<br>
危险按钮：一般用于严重行为，如删除
<button class="btn btn-danger">危险按钮</button>
<br>
表现为链接：button标签表现为超链接，但仍是button标签
<button class="btn btn-link">表现为链接</button>
<br>
大按钮：引人注目
<button class="btn btn-lg">大按钮</button>
<br>
小按钮：
<button class="btn btn-sm">小按钮</button>
<br>
最小的按钮：
<button class="btn btn-xs">最小的按钮</button>
<br>
宽屏按钮：水平方向占父容器的100%
<button class="btn btn-block">宽屏按钮</button>
<br>
激活状态按钮：按钮一直处于被按下的状态，一般用于显示一个需要很长时间的操作，如上传大文件
<button class="btn active">激活状态按钮</button>
<br>
无效按钮：按钮表现为无效的状态，不可点击，如某些处于倒计时的状态
<button class="btn disabled">无效按钮</button>
<br>
多种按钮样式混用：多种按钮的样式可以一起用
<button class="btn btn-xs btn-danger disabled">红包已过期</button>
</body>
</html>
1
2. 表格
- 基本表格`table`
- 带斑马线的表格`table table-striped`
- 带边框的表格`table table-bordered`
- 有鼠标悬停状态的表格`table table-hover`
- 更加紧凑的表格`table table-condensed`
- 多种效果整合的表格
- 激活样式`active` `alert-active`
- 成功样式`success` `alert-success`
- 信息样式`info` `alert-info`
- 警告样式`warning` `alert-warning`
- 危险样式`danger` `alert-danger`
10
11
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>基本样式之二：表格</title>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
div{
margin-left: 100px;
width: 400px;
height: 400px;
}
</style>
<body>
<div>
<h2>基本表格：有横向分割线，宽度占用父容器的。</h2>
<table class="table">
<thead>
<th>姓名</th>
<th>岗位</th>
<th>状态</th>
</thead>
<tr>
<td>张三</td>
<td>前端开发</td>
<td>面试中</td>
</tr>
<tr>
<td>李四</td>
<td>java开发</td>
<td>待筛选</td>
</tr>
<tr>
<td>冯田</td>
<td>前端开发</td>
<td>已回绝</td>
</tr>
<tr>
<td>周舟</td>
<td>算法工程师</td>
<td>面试中</td>
</tr>
<tr>
<td>孙大大</td>
<td>前端开发</td>
<td>三面</td>
</tr>
<tr>
<td>刘萌</td>
<td>数据库工程师</td>
<td>简历待筛选</td>
</tr>
</table>
<h2>待斑马线的表格：</h2>
<table class="table table-striped">
<thead>
<th>姓名</th>
<th>岗位</th>
<th>状态</th>
</thead>
<tr>
<td>张三</td>
<td>前端开发</td>
<td>面试中</td>
</tr>
<tr>
<td>李四</td>
<td>java开发</td>
<td>待筛选</td>
</tr>
<tr>
<td>冯田</td>
<td>前端开发</td>
<td>已回绝</td>
</tr>
<tr>
<td>周舟</td>
<td>算法工程师</td>
<td>面试中</td>
</tr>
<tr>
<td>孙大大</td>
<td>前端开发</td>
<td>三面</td>
</tr>
<tr>
<td>刘萌</td>
<td>数据库工程师</td>
<td>简历待筛选</td>
</tr>
</table>
<h2>带边框的表格：</h2>
<table class="table table-bordered">
<thead>
<th>姓名</th>
<th>岗位</th>
<th>状态</th>
</thead>
<tr>
<td>张三</td>
<td>前端开发</td>
<td>面试中</td>
</tr>
<tr>
<td>李四</td>
<td>java开发</td>
<td>待筛选</td>
</tr>
<tr>
<td>周舟</td>
<td>算法工程师</td>
<td>面试中</td>
</tr>
<tr>
<td>孙大大</td>
<td>前端开发</td>
<td>三面</td>
</tr>
</table>
<h2>鼠标悬停状态的表格：</h2>
<table class="table table-hover">
<thead>
<th>姓名</th>
<th>岗位</th>
<th>状态</th>
</thead>
<tr>
<td>张三</td>
<td>前端开发</td>
<td>面试中</td>
</tr>
<tr>
<td>李四</td>
<td>java开发</td>
<td>待筛选</td>
</tr>
<tr>
<td>周舟</td>
<td>算法工程师</td>
<td>面试中</td>
</tr>
<tr>
<td>孙大大</td>
<td>前端开发</td>
<td>三面</td>
</tr>
</table>
<h2>更加紧凑的表格：</h2>
<table class="table table-condensed">
<thead>
<th>姓名</th>
<th>岗位</th>
<th>状态</th>
</thead>
<tr>
<td>张三</td>
<td>前端开发</td>
<td>面试中</td>
</tr>
<tr>
<td>李四</td>
<td>java开发</td>
<td>待筛选</td>
</tr>
<tr>
<td>周舟</td>
<td>算法工程师</td>
<td>面试中</td>
</tr>
<tr>
<td>孙大大</td>
<td>前端开发</td>
<td>三面</td>
</tr>
</table>
<h2>多种表格效果整合在一起：</h2>
<table class="table table-bordered table-striped table-hover table-condensed">
<thead>
<th>姓名</th>
<th>岗位</th>
<th>状态</th>
</thead>
<tr>
<td>张三</td>
<td>前端开发</td>
<td>面试中</td>
</tr>
<tr>
<td>李四</td>
<td>java开发</td>
<td>待筛选</td>
</tr>
<tr>
<td>周舟</td>
<td>算法工程师</td>
<td>面试中</td>
</tr>
<tr>
<td>孙大大</td>
<td>前端开发</td>
<td>三面</td>
</tr>
</table>
<h2>激活样式</h2>
<table class="table">
<thead>
<th>姓名</th>
<th>岗位</th>
<th>状态</th>
</thead>
<tr>
<td>张三</td>
<td>前端开发</td>
<td>面试中</td>
</tr>
<tr>
<td>李四</td>
<td>java开发</td>
<td>待筛选</td>
</tr>
<tr>
<td>冯田</td>
<td>前端开发</td>
<td>已回绝</td>
</tr>
<tr>
<td>周舟</td>
<td>算法工程师</td>
<td>面试中</td>
</tr>
<tr class="active">
<td>孙大大</td>
<td>前端开发</td>
<td>三面</td>
</tr>
<tr>
<td>刘萌</td>
<td>数据库工程师</td>
<td>简历待筛选</td>
</tr>
</table>
<h2>成功样式1</h2>
<table class="table">
<thead>
<th>姓名</th>
<th>岗位</th>
<th>状态</th>
</thead>
<tr>
<td>张三</td>
<td>前端开发</td>
<td>面试中</td>
</tr>
<tr>
<td>李四</td>
<td>java开发</td>
<td>待筛选</td>
</tr>
<tr>
<td>冯田</td>
<td>前端开发</td>
<td>已回绝</td>
</tr>
<tr>
<td>周舟</td>
<td>算法工程师</td>
<td>面试中</td>
</tr>
<tr class="success">
<td>孙大大</td>
<td>前端开发</td>
<td>三面</td>
</tr>
<tr>
<td>刘萌</td>
<td>数据库工程师</td>
<td>简历待筛选</td>
</tr>
</table>
<h2>成功样式2</h2>
<table class="table">
<thead>
<th>姓名</th>
<th>岗位</th>
<th>状态</th>
</thead>
<tr>
<td>张三</td>
<td>前端开发</td>
<td>面试中</td>
</tr>
<tr>
<td>李四</td>
<td>java开发</td>
<td>待筛选</td>
</tr>
<tr>
<td>冯田</td>
<td>前端开发</td>
<td>已回绝</td>
</tr>
<tr>
<td>周舟</td>
<td>算法工程师</td>
<td>面试中</td>
</tr>
<tr class="alert-success">
<td>孙大大</td>
<td>前端开发</td>
<td>三面</td>
</tr>
<tr>
<td>刘萌</td>
<td>数据库工程师</td>
<td>简历待筛选</td>
</tr>
</table>
<h2>信息样式</h2>
<table class="table">
<thead>
<th>姓名</th>
<th>岗位</th>
<th>状态</th>
</thead>
<tr>
<td>张三</td>
<td>前端开发</td>
<td>面试中</td>
</tr>
<tr>
<td>李四</td>
<td>java开发</td>
<td>待筛选</td>
</tr>
<tr>
<td>冯田</td>
<td>前端开发</td>
<td>已回绝</td>
</tr>
<tr>
<td>周舟</td>
<td>算法工程师</td>
<td>面试中</td>
</tr>
<tr class="info">
<td>孙大大</td>
<td>前端开发</td>
<td>三面</td>
</tr>
<tr>
<td>刘萌</td>
<td>数据库工程师</td>
<td>简历待筛选</td>
</tr>
</table>
<h2>警告样式</h2>
<table class="table">
<thead>
<th>姓名</th>
<th>岗位</th>
<th>状态</th>
</thead>
<tr>
<td>张三</td>
<td>前端开发</td>
<td>面试中</td>
</tr>
<tr>
<td>李四</td>
<td>java开发</td>
<td>待筛选</td>
</tr>
<tr>
<td>冯田</td>
<td>前端开发</td>
<td>已回绝</td>
</tr>
<tr>
<td>周舟</td>
<td>算法工程师</td>
<td>面试中</td>
</tr>
<tr class="warning">
<td>孙大大</td>
<td>前端开发</td>
<td>三面</td>
</tr>
<tr>
<td>刘萌</td>
<td>数据库工程师</td>
<td>简历待筛选</td>
</tr>
</table>
<h2>危险样式</h2>
<table class="table">
<thead>
<th>姓名</th>
<th>岗位</th>
<th>状态</th>
</thead>
<tr>
<td>张三</td>
<td>前端开发</td>
<td>面试中</td>
</tr>
<tr>
<td>李四</td>
<td>java开发</td>
<td>待筛选</td>
</tr>
<tr>
<td>冯田</td>
<td>前端开发</td>
<td>已回绝</td>
</tr>
<tr>
<td>周舟</td>
<td>算法工程师</td>
<td>面试中</td>
</tr>
<tr class="alert-danger">
<td>孙大大</td>
<td>前端开发</td>
<td>三面</td>
</tr>
<tr>
<td>刘萌</td>
<td>数据库工程师</td>
<td>简历待筛选</td>
</tr>
</table>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
3. 图片
- 圆角`img-round`
- 圆形`img-circle`
- 缩略图`img-thumbnail`
1
2
3
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>基本样式之三：图片</title>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
body{
margin: 10px 10px;
}
img{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
圆角：
<img src="images/tree.JPG" class="img-rounded">
圆形：
<img src="images/tree.JPG" class="img-circle">
缩略图：
<img src="images/tree.JPG" class="img-thumbnail">
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
4. 表单
- `form-control`可以去除阴影，边框带有淡蓝色，输入状态更柔和。
1
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>基本样式之三：表单</title>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<body>
<form action="" >
文本框:<input type="text" class="form-control">
密码:<input type="password" class="form-control">
<textarea class="form-control" name="t1" ></textarea>
技能：<select class="form-control" name="" >React</option>
</select>
</form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
5. 文本
- 淡灰色文本`text-muted`
- 强调文本 `text-primary`
- 操作成功文本`text-success`
- 提示信息文本`text-info`
- 警告文本`text-warning`
- 危险操作文本`text-danger`
1
2
3
4
5
6
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>基本样式之四：文本</title>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
body{
margin: 50px 50px;
}
</style>
</head>
<body>
<div class="text-muted">- 淡灰色文本`text-muted`：常用于说明性文字</div>
<div class="text-primary">- 强调文本 `text-primary`：强调行文字</div>
<div class="text-success">- 操作成功文本`text-success`：提示成功行为</div>
<div class="text-info">- 提示信息文本`text-info`：指导性文字</div>
<div class="text-warning">- 警告文本`text-warning`：警告文字</div>
<div class="text-danger">- 危险操作文本`text-danger`危险操作，如删除</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
6. 背景
- 强调的背景`bg-primary`
- 操作成功文字的背景`bg-success`
- 信息提示文字的背景`bg-info`
- 警告提示文字的背景`bg-warning`
- 危险提示文字的背景`bg-danger`
1
2
3
4
5
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>基本样式之六：背景</title>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
body{
margin: 50px 50px;
}
div{
width: 300px;
height: 100px;
}
</style>
</head>
<body>
<div class="bg-primary">- 强调的背景`bg-primary`</div>
<div class="bg-success">- 操作成功文字的背景`bg-success`</div>
<div class="bg-info">- 信息提示文字的背景`bg-info`</div>
<div class="bg-warning">- 警告提示文字的背景`bg-warning`</div>
<div class="bg-danger">- 危险提示文字的背景`bg-danger`</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
7. 其他
- 关闭按钮`close`
- 下拉菜单的按钮`caret`
- 左浮动`pull-left`
- 右浮动`pull-right`
- 显示`show`
- 隐藏（不占位）`hidden`
- 隐藏（占位）`invisible`
1
2
3
4
5
6
7
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>基本样式之七：其他</title>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
body{
margin: 50px 50px;
}
div{
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<button type="button" class="close">×</button>
<select class="caret" name="" >444</div>
<div>555</div>
<div>666</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
8. 栅格布局
- 使用Bootstrap的栅格系统，可以实现像table那样的行列效果。
- 使用栅格系统，首先要准备`<div class='container'></div>`；然后要准备`<div class='row'></div>`表示行，最后要准备的div就是列。
- Bootstrap的栅格系统默认把一行分成12列。
1
2
3
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>基本样式之八：栅格布局</title>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
div.container div.row div{
margin: 5px 0;
}
div.container div.row div{
background-color: lightgray;
border: 1px solid gray;
text-align: center;
}
</style>
</head>
<body>
<h3>container-->row-->col-xs-12</h3>
<div class="container">
<div class="row">
<div class="col-xs-12">占12列</div>
</div>
</div>
<h3>container-->row-->col-lg-6</h3>
<div class="container">
<div class="row">
<div class="col-lg-6">占六列</div>
<div class="col-lg-6">占六列</div>
</div>
</div>
<h3>container-->row-->col-sm-6</h3>
<div class="container">
<div class="row">
<div class="col-sm-6">占六列</div>
<div class="col-sm-6">占六列</div>
</div>
</div>
<h3>container-->row-->col-xs-1</h3>
<div class="container">
<div class="row">
<div class="col-xs-6">占六列</div>
<div class="col-xs-6">占六列</div>
</div>
</div>
<h3>container-->row-->col-xs-4</h3>
<div class="container">
<div class="row">
<div class="col-xs-4">占四列</div>
<div class="col-xs-4">占四列</div>
<div class="col-xs-4">占四列</div>
</div>
</div>
<h3>container-->row-->col-sm-3</h3>
<div class="container">
<div class="row">
<div class="col-sm-3">占三列</div>
<div class="col-sm-3">占三列</div>
<div class="col-sm-3">占三列</div>
<div class="col-sm-3">占三列</div>
</div>
</div>
<h3>container-->row-->col-xs-1</h3>
<div class="container">
<div class="row">
<div class="col-xs-1">占一列</div>
<div class="col-xs-1">占一列</div>
<div class="col-xs-1">占一列</div>
<div class="col-xs-1">占一列</div>
<div class="col-xs-1">占一列</div>
<div class="col-xs-1">占一列</div>
<div class="col-xs-1">占一列</div>
<div class="col-xs-1">占一列</div>
<div class="col-xs-1">占一列</div>
<div class="col-xs-1">占一列</div>
<div class="col-xs-1">占一列</div>
<div class="col-xs-1">占一列</div>
</div>
</div>
<h3>container-->row-->col-sm-8/5</h3>
<div class="container">
<div class="row">
<div class="col-sm-8">占八列</div>
<div class="col-sm-5">占五列</div>
</div>
</div>
</body>
</html>
1
98
———-
组件
1. 字体图标
一个字体图标<span class='glyph icon glyphicon-asterisk'></span>
字体图标设置颜色<span class='glyphicon glyphicon-asterisk text-success'></span>
字体图标上加超链接<a href="#nowhere"><span class="glyphicon glyphicon-asterisk"></span> 连接</a>
在button上使用字体图标<button class="btn btn-primary btn"><span class="glyphicon glyphicon-asterisk"></span> 按钮</button>
更多字体图标（详见所有的bootstrap字体图标）
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>组件之一：字体图标</title>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<body>
<h2>一个字体图标</h2>
<span class="glyphicon glyphicon-asterisk"></span>
<h2>字体图标设颜色</h2>
<span class="glyphicon glyphicon-asterisk text-success"></span>
<h2>字体图标上加超链接</h2>
<a href="#"><span class="glyphicon glyphicon-asterisk"></span>超链接</a>
<h2>在button上使用字体图标</h2>
<button class="btn btn-primary btn"><span class="glyphicon glyphicon-asterisk"></span>按钮</button>
</body>
</html>
2. 下拉菜单
下拉菜单
标题不可以点击
分割线
禁用项
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>组件之二：下拉菜单</title>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<body>
<h3>下拉菜单</h3>
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" >444</a>
</li>
</ul>
</div>
<h3>标题不可点击</h3>
<!--<li role="presentation" class="dropdown-header">Dropdown header</li>-->
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" >444</a>
</li>
</ul>
</div>
<h3>菜单分割线</h3>
<!--<li role="presentation" class="divider"></li>-->
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" >444</a>
</li>
</ul>
</div>
<h3>禁用的菜单项</h3>
<!--<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Bootstrap(开发中)</a></li>-->
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" >444(开发中)</a>
</li>
</ul>
</div>
<div ></div>
</body>
</html>
1
3. 按钮
按钮组
按钮工具栏
按钮组大小
垂直排列的按钮组
复选框按钮组
单选框按钮组
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>组件之三：按钮组</title>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
</head>
<body>
<h3>按钮组</h3>
<div class="btn-button" role="group" arial-label="web">
<button type="button" class="btn btn-default">老大</button>
<button type="button" class="btn btn-default">老二</button>
<button type="button" class="btn btn-default">老幺</button>
</div>
<h3>按钮工具栏</h3>
<div class="btn-toolbar" role="toolbar" aria-label="Front End"></div>
<div class="btn-group" role="group" aria-label="HTML">
<button type="button" class="btn btn-default">111</button>
<button type="button" class="btn btn-default">222</button>
<button type="button" class="btn btn-default">333</button>
</div>
<div class="btn-group" role="group" aria-label="CSS">
<button type="button" class="btn btn-default">111</button>
<button type="button" class="btn btn-default">222</button>
<button type="button" class="btn btn-default">333</button>
</div>
<div class="btn-group" role="group" aria-label="JS">
<button type="button" class="btn btn-default">111</button>
<button type="button" class="btn btn-default">222</button>
<button type="button" class="btn btn-default">333</button>
</div>
<h3>按钮组大小</h3>
<div class="btn-group btn-group-lg" role="group" arial-label="web">
<button type="button" class="btn btn-default">老大</button>
<button type="button" class="btn btn-default">老二</button>
<button type="button" class="btn btn-default">老幺</button>
</div>
<div class="btn-group btn-group" role="group" arial-label="web">
<button type="button" class="btn btn-default">老大</button>
<button type="button" class="btn btn-default">老二</button>
<button type="button" class="btn btn-default">老幺</button>
</div>
<div class="btn-group btn-group-sm" role="group" arial-label="web">
<button type="button" class="btn btn-default">老大</button>
<button type="button" class="btn btn-default">老二</button>
<button type="button" class="btn btn-default">老幺</button>
</div>
<div class="btn-group btn-group-xs" role="group" arial-label="web">
<button type="button" class="btn btn-default">老大</button>
<button type="button" class="btn btn-default">老二</button>
<button type="button" class="btn btn-default">老幺</button>
</div>
<h3>垂直排列的按钮组</h3>
<div class="btn-group-vertical" role="group" aria-label="web">
<button type="button" class="btn btn-default">老大</button>
<button type="button" class="btn btn-default">老二</button>
<button type="button" class="btn btn-default">老幺</button>
</div>
<h3>复选框</h3>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="checkbox" checked>老大
</label>
<label class="btn btn-default">
<input type="checkbox">老二
</label>
<label class="btn btn-default">
<input type="checkbox">老幺
</label>
</div>
<h3>单选框</h3>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" checked>老大
</label>
<label class="btn btn-default">
<input type="radio">老大
</label>
<label class="btn btn-default">
<input type="radio">老大
</label>
</div>
</body>
</html>
1
4. 按钮式下拉菜单
单按钮下拉菜单
分裂式按钮下拉菜单
按钮大小
向上弹出式菜单
<!DOCTYPE html>
<html>
<head>
<title>组件之四：按钮式下拉菜单</title>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<body>
<h3>单按钮下拉菜单</h3>
其中：btn-default/btn-primary/btn-success/btn-info/btn-warning/btn-danger(此处只列出了btn-primary)
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle " data-toggle="dropdown">
primary
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">吃</a>
</li>
<li role="presentation">
<a href="#">穿</a>
</li>
<li role="presentation">
<a href="#">住</a>
</li>
<li role="presentation">
<a href="#">行</a>
</li>
</ul>
</div>
<h3>分裂式按钮下拉菜单</h3>
<div class="btn-group">
<button type="button" class="btn btn-default">默认</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">吃</a>
</li>
<li role="presentation">
<a href="#">穿</a>
</li>
<li role="presentation">
<a href="#">住</a>
</li>
<li role="presentation">
<a href="#">行</a>
</li>
</ul>
</div>
<h3>按钮大小</h3>
其中，btn-lg/btn/btn-sm/btn-xs（此处只列出了btn-lg）
<div class="btn-group">
<button type="button" class="btn btn-lg btn-default dropdown-toggle " data-toggle="dropdown">
大号
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">吃</a>
</li>
<li role="presentation">
<a href="#">穿</a>
</li>
<li role="presentation">
<a href="#">住</a>
</li>
<li role="presentation">
<a href="#">行</a>
</li>
</ul>
</div>
<h3>向上弹出式菜单</h3>
<div class="btn-group dropup">
<button type="button" class="btn btn btn-default dropdown-toggle" >行</a></li>
</ul>
</div>
</body>
</html>
1
5. 输入框组
基本组合
尺寸
复选框和单选框
整合按钮
整合下拉菜单
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>组件之五：输入框组</title>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
body{
margin: 300px 300px;
}
div{
margin: 5px;
}
</style>
</head>
<body>
<h3>基本组合</h3>
<div class="input-group">
<span class="input-group-addon" >.00</span>
</div>
<h3>尺寸</h3>
<div class="input-group input-group-lg">
<span class="input-group-addon" >
</div>
<h3>复选框和单选框</h3>
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<input type="text" class="form-control">
</div>
<div class="input-group">
<span class="input-group-addon">
<input type="radio">
</span>
<input type="text" class="form-control">
</div>
<h3>整合按钮</h3>
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">百度</button>
</span>
<input type="text" class="form-control" placeholder="Search:">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search:">
<span class="input-group-btn">
<button type="button" class="btn btn-default">Google</button>
</span>
</div>
<h3>整合下拉菜单</h3>
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown" aria-expanded="false">
Search Engine<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Google</a></li>
<li><a href="#">Baidu</a></li>
<li class="divider"></li>
<li><a href="#">Sogou</a></li>
<li><a href="#">YaHoo</a></li>
</ul>
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Search Engine <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a href="#">Google</a></li>
<li><a href="#">Baidu</a></li>
<li class="divider"></li>
<li><a href="#">Sogou</a></li>
<li><a href="#">YaHoo</a></li>
</ul>
</div>
</div>
<h3></h3>
</body>
</html>
1
2
6. 导航栏
标签页
胶囊式标签页
垂直胶囊式标签页
禁用的链接
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>组件之六：导航栏</title>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
body{
margin: 100px 100px;
}
</style>
</head>
<body>
<h3>标签页</h3>
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">本科</a></li>
<li role="presentation"><a href="#">研究生</a></li>
<li role="presentation"><a href="#">博士生</a></li>
</ul>
<h3>胶囊式标签页</h3>
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">本科</a></li>
<li role="presentation"><a href="#">硕士生</a></li>
<li role="presentation"><a href="#">博士生</a></li>
</ul>
<h3>垂直胶囊式标签页</h3>
<ul class="nav nav-pills nav-stacked" >
<li role="presentation" class="active"><a href="#">本科生</a></li>
<li role="presentation"><a href="#">硕士生</a></li>
<li role="presentation"><a href="#">博士生</a></li>
</ul>
<h3>禁用的标签链接</h3>
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">本科生</a></li>
<li role="presentation" class="disabled"><a href="#">硕士生</a></li>
<li role="presentation"><a href="#">博士生</a></li>
</ul>
</body>
</html>
1
7. 面包碎屑导航
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>组件之七：面包屑导航</title>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<body>
<h3>面包碎屑导航</h3>
<ol class="breadcrumb">
<li><a href="#">本科生</a></li>
<li class="active">硕士生</li>
<li><a href="#">博士生</a></li>
</ol>
</body>
</html>
1
8. 分页
基本分页
禁用和激活状态
尺寸
翻页
两端对齐
翻页禁用状态
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>组件之八：分页</title>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
body{
margin: 200px 200px ;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<h3>基本分页</h3>
<nav>
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
<h3>禁用和激活状态</h3>
<nav>
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li class="disabled">
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
<h3>尺寸</h3>
<nav>
<ul class="pagination pagination-lg">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
<ul class="pagination pagination-sm">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
<h3>翻页</h3>
<nav>
<ul class="pager">
<li><a href="#">上一页</a></li>
<li><a href="#">此页</a></li>
<li><a href="#">下一页</a></li>
</ul>
</nav>
<h3>两端对齐</h3>
<nav>
<ul class="pager">
<li class="previous"><a href="#"><span aria-hidden="true">←</span>上一页</a></li>
<li class="next"><a href="#">下一页<span aria-hidden="true">→</span></a></li>
</ul>
</nav>
<h3>翻页禁用状态</h3>
<nav>
<ul class="pager">
<li class="disabled"><a href="#">上一页</a></li>
<li><a href="#">下一页</a></li>
</ul>
</nav>
</body>
</html>
1
9. 标签
默认标签
强调标签
成功标签
信息标签
警告标签
危险标签
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>组件之九：标签</title>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
body{
margin: 100px 100px;
}
</style>
</head>
<body>
<span class="label label-default">默认标签</span>
<span class="label label-primary">强调标签</span>
<span class="label label-success">成功标签</span>
<span class="label label-info">信息标签</span>
<span class="label label-warning">警告标签</span>
<span class="label label-danger">危险标签</span>
</body>
</html>
1
10. 消息提示数字
超链接旁的消息数提示
按钮中的消息数提示
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>组件之十：消息数提示</title>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
body{
margin: 100px 100px;
}
</style>
</head>
<body>
<h3>超链接旁的消息数提示</h3>
<a href="#">您的消息 <span class="badge">24</span></a>
<h3>按钮中的消息数提示</h3>
<button class="btn btn-warning" type="button">新短消息 <span class="badge">6</span></button>
</body>
</html>
1
2
3
4
5
11. 超大屏幕
jumbotron
[‘dʒʌmbəutrɔn]
n. 电视机的超大屏幕
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>组件之十一：超大屏幕</title>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<body>
<!--jumbotron ['dʒʌmbəutrɔn] n. 电视机的超大屏幕-->
<div class="jumbotron">
<div class="container" align="center">
<h2 class="text-info" >小小酥</h2>
<br>
<div class="text-muted">向这个世界，说出你的生活</div>
<br>
<p><a href="#" role="button" class="btn btn-success">加入我们</a></p>
</div>
</div>
</body>
</html>
1
12. 副标题
class='page-header'
正副标题下面会有一条分割线
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>组件之十二：副标题</title>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<body>
<div class="page-header">
<h1>正标题 <small>副标题</small></h1>
</div>
</body>
</html>
13. 缩略图
相册风格
自定义内容
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>组件之十三：缩略图</title>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
img{
width: 120px;
height: 120px;
}
</style>
</head>
<body>
<h3>相册风格缩略图</h3>
<div class="container">
<div class="row">
<div class="col-xs-4">
<a href="#" class="thumbnail"><img src="images/xd.png"></a>
</div>
<div class="col-xs-4">
<a href="#" class="thumbnail"><img src="images/tree.JPG"></a>
</div>
<div class="col-xs-4">
<a href="#" class="thumbnail"><img src="images/xdsay.png"></a>
</div>
</div>
</div>
<h3>自定义缩略图</h3>
<div class="container">
<div class="row">
<div class="col-xs-4">
<a href="#" class="thumbnail"><img src="images/xd.png"></a>
<div class="caption">
<div class="text-muted">熊顿小样</div>
<br>
<p><a href="#" class="btn btn-primary" role="button">收藏</a></p>
</div>
</div>
<div class="col-xs-4">
<a href="#" class="thumbnail"><img src="images/tree.JPG"></a>
<div class="caption">
<div class="text-muted">小小树苗</div>
<a href="#" class="btn btn-success" role="button">收藏</a>
</div>
</div>
<div class="col-xs-4">
<a href="#" class="thumbnail"><img src="images/xdsay.png"></a>
<div class="caption">
<div class="text-muted">熊顿言之</div>
<a href="#" class="btn btn-danger" role="button">收藏</a>
</div>
</div>
</div>
</div>
</body>
</html>
1
14. 警告
警告框
可关闭的警告框
警告框中的的超链接
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>组件之十四：警告</title>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
body{
margin: 100px 100px;
}
</style>
</head>
<body>
<h3>警告框</h3>
<div class="alert alert-success" role="alert">操作成功</div>
<div class="alert alert-info" role="alert">消息提示</div>
<div class="alert alert-warning" role="alert">警告提示</div>
<div class="alert alert-danger" role="alert">危险提示</div>
<h3>可关闭的警告框</h3>
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
请关闭
</div>
<h3>警告中的超链接</h3>
<div class="alert alert-success" role="alert">
<span>重磅消息！！</span><a href="#nowhere" class="alert-link">点击查看</a>
</div>
<div class="alert alert-primary" role="alert">
<span>重磅消息！！</span><a href="#nowhere" class="alert-link">点击查看</a>
</div>
<div class="alert alert-info">
<span>重磅消息！！</span><a href="#nowhere" class="alert-link">点击查看</a>
</div>
<div class="alert alert-danger" role="alert">
<span>重磅消息！！</span><a href="#nowhere" class="alert-link">点击查看</a>
</div>
</body>
</html>
1
9
15. 进度条
基本进度条
带提示的进度条
多彩进度条
条纹进度条
动条纹进度条
堆叠进度条
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>组件之十五：进度条</title>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
body{
margin: 100px 100px;
}
</style>
</head>
<body>
<h3>基本进度条</h3>
<div class="progress">
<div class="progress-bar" ></div>
</div>
<h3>带提示的进度条</h3>
<div class="progress">
<div class="progress-bar" >30%</div>
</div>
<div class="progress">
<div class="progress-bar" >0%</div>
</div>
<h3>多彩进度条</h3>
<div class="progress">
<div class="progress-bar progress-bar-danger" >19%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" >36%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" >99%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" >100%</div>
</div>
<h3>条纹进度条</h3>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" >27%</div>
</div>
<h3>动条纹进度条</h3>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped active" >69%</div>
</div>
<h3>堆叠进度条</h3>
<div class="progress">
<div class="progress-bar progress-bar-danger" >19%</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" >18%</div>
<div class="progress-bar progress-bar-success progress-bar-striped active" >30%</div>
</div>
</body>
</html>
=============================
16. 列表组
基本列表组
消息提示列表组
链接列表组
按钮列表组
多彩列表组
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>组件之十六：列表组</title>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
body{
margin: 100px 100px;
}
</style>
</head>
<body>
<h3>基本列表组</h3>
<ul class="list-group">
<li class="list-group-item">香草泡芙</li>
<li class="list-group-item">草莓班戟</li>
<li class="list-group-item">拿破仑</li>
<li class="list-group-item">芒果千层</li>
</ul>
<h3>消息提示列表组</h3>
<ul class="list-group">
<li class="list-group-item"><span class="badge">23</span>香草泡芙</li>
<li class="list-group-item">草莓班戟<span class="badge">12</span></li>
<li class="list-group-item"><span class="badge">18</span>拿破仑</li>
<li class="list-group-item"><span class="badge">2</span>芒果千层</li>
</ul>
<h3>链接列表组</h3>
<div class="list-group">
<a href="#" class="list-group-item">香草泡芙</a>
<a href="#" class="list-group-item active">草莓班戟</a>
<a href="#" class="list-group-item">拿破仑</a>
<a href="#" class="list-group-item">芒果千层</a>
</div>
<h3>按钮列表组</h3>
<div class="list-group">
<button type="button" class="list-group-item">香草泡芙</button>
<button type="button" class="list-group-item">草莓班戟</button>
<button type="button" class="list-group-item">拿破仑</button>
<button type="button" class="list-group-item">芒果千层</button>
</div>
<h3>多彩列表组</h3>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-danger">香草泡芙</a>
<a href="#" class="list-group-item list-group-item-warning">草莓班戟</a>
<a href="#" class="list-group-item list-group-item-success">拿破仑</a>
<a href="#" class="list-group-item list-group-item-info">芒果千层</a>
</div>
</body>
</html>
1
================================
17. 面板
基本面板
面板标题
面板脚注
彩色面板
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>组件之十七：面板</title>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
body{
margin: 100px 100px;
}
</style>
</head>
<body>
<h3>基本面板</h3>
<div class="panel panel-default">
<div class="panel-body">面板内容</div>
</div>
<h3>面板标题</h3>
<div class="panel panel-default">
<div class="panel-heading">面板标题</div>
<div class="panel-body">面板内容</div>
</div>
<h3>面板脚注</h3>
<div class="panel panel-default">
<div class="panel-body">面板内容</div>
<div class="panel-footer">面板脚注</div>
</div>
<h3>彩色面板</h3>
panel-success\panel-warning\panel-danger\panel-info
<div class="panel panel-info">
<div class="panel-heading">面板标题</div>
<div class="panel-body">面板内容</div>
<div class="panel-footer">面板脚注</div>
</div>
</body>
</html>
=================================
18. 潜入效果
文字嵌入效果
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>组件之十八：嵌入效果</title>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
body{
margin: 100px 100px;
}
</style>
</head>
<body>
<h3>嵌入文字的效果</h3>
<div class="well">文字嵌入效果</div>
</body>
</html>
==============================
19. 头部尾部菜单
贴在头部（不消失）
贴在头部（会消失）
贴在尾部（不消失）
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>组件之十九：头部尾部</title>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
body{
margin: 100px 100px;
}
</style>
</head>
<body>
<h3>头部（不消失）</h3>
<nav class="navbar navbar-default navbar-fixed-top">
<button class="btn btn-info">本科生</button>
<button class="btn btn-warning">研究生</button>
<button class="btn bg-danger">博士生</button>
</nav>
<div >
此处省去一亿字。。。
此处省去一亿字。。。
此处省去一亿字。。。
此处省去一亿字。。。
此处省去一亿字。。。
此处省去一亿字。。。
此处省去一亿字。。。
</div>
<h3>头部（会消失）</h3>
<nav class="navbar navbar-default navbar-static-top">
<button class="btn btn-warning">小学生</button>
<button class="btn btn-primary">初中生</button>
<button class="btn btn-danger">高中生</button>
</nav>
<div >
此处省去一亿字。。。
此处省去一亿字。。。
此处省去一亿字。。。
此处省去一亿字。。。
此处省去一亿字。。。
</div>
<h3>尾部（不消失）</h3>
<div class="navbar navbar-default navbar-fixed-bottom"><div align="center">底部相关信息</div></div>
</body>
</html>
==============================================
———-
插件
1. 模态窗体
静态模态窗口
点击弹出
无动画效果
点击空白处不收起
使用JS控制模态窗口
监听模态的变化
modal
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>插件之一：模态窗口</title>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<body>
<h3>静态模态窗口</h3>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button data-dismiss="modal" class="close" type="button">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">留言板</h4>
</div>
<div class="modal-body">
<p>留言内容</p>
<textarea class="form-control"></textarea>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default">取消</button>
<button data-dismiss="modal" class="btn btn-primary">发表</button>
</div>
</div>
</div>
<h3>点击弹出窗口</h3>
<!--控制窗口弹出-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">我要留言</button>
<!--窗口-->
<div class="modal fade" >确定</button>
</div>
</div>
</div>
</div>
<h3>不要动画效果地弹出</h3>
<!--重点：用class="modal"代替class="modal fade"-->
<!--控制窗口弹出按钮-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal1">我要留言</button>
<!--窗口（无效果弹出）-->
<div class="modal" >提交</button>
</div>
</div>
</div>
</div>
<h3>点击空白不会收起</h3>
<!--重点：data-backdrop="static" -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal2">留言板</button>
<div class="modal fade" >确定</button>
</div>
</div>
</div>
</div>
</body>
</html>
===================================================
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>插件之一：模态窗口</title>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<script>
$(function () {
$('#open').click(function () {
$('#myModal').modal('show');
});
$('#close').click(function () {
$('#myModal').modal('hide');
});
$('#toggle').click(function () {
$('#myModal').modal('toggle');
})
})
</script>
</head>
<body>
<button class="btn btn-default" >切换模态窗口</button>
<div class="modal fade" >确定</button>
</div>
</div>
</div>
</div>
</body>
</html>
==========================================
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>插件之一：模态窗口</title>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<script>
$(function () {
$('#myModal').on('show.bs.modal', function () {
alert('Start to show');
});
$('#myModal').on('shown.bs.modal', function () {
alert('Finished show');
});
$('#myModal').on('hide.bs.modal', function () {
alert('Start to hide');
});
$('#myModal').on('hidden.bs.modal', function () {
alert('Finished hide')
})
})
</script>
</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">点击留言</button>
<div class="modal fade" >确定</button>
</div>
</div>
</div>
</div>
</body>
</html>
-----------------------------------------
2. 可切换导航栏
可切换导航栏
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>插件之二：可切换导航栏</title>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
p{
margin-top: 10px;
margin-left: 10px;
}
img{
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<ul >香蕉屋</a></li>
</ul>
</li>
</ul>
<div >
</div>
</div>
</body>
</html>
------------------------------------------
3. 提示工具
非Bootstrap工具提示
左侧提示
右侧提示
上方提示
下方提示
tooltip （n. 工具提示；提示信息；提示框；提示文本）
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>插件之三：提示工具</title>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<body>
<script>
$(function () {
$("[data-toggle='tooltip']").tooltip();
})
</script>
<h3>非Bootstrap工具提示</h3>
<button class="btn btn-default" title="提示信息">非Bootstrap工具提示</button>
<h3>左侧提示信息</h3>
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="left" title="提示信息">
鼠标悬停左侧提示信息
</button>
<h3>右侧提示信息</h3>
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="right" title="提示信息">
鼠标悬停右侧提示信息
</button>
<h3>上方提示信息</h3>
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="提示信息">
鼠标悬停上方提示信息
</button>
<h3>下方提示信息</h3>
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="提示信息">
鼠标悬停下方提示信息
</button>
</body>
</html>
-----------------------------------------------------
4. 折叠
基本折叠
面板折叠
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>插件之四：折叠</title>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
div.well{
margin: 10px;
}
</style>
</head>
<body>
<h3>基本折叠</h3>
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#mango" aria-expanded="false" aria-controls="collapseExample">
Mango
</a>0
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#berries" aria-expanded="false" aria-controls="collapseExample">
Berries
</button>
<div class="collapse" ></div>
</body>
</html>
--------------------------------------------
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>插件之四：折叠</title>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<body>
<div class="panel-group" >
香橙。。。。。。。。。。。。。。。。。。。。。。。。。
</div>
</div>
</div>
</div>
</body>
</html>
5. 轮播
基本轮播
带标题的轮播
设置轮播的速度
控制轮播的方向
carousel ( [‘kærə’sɛl] n. 旋转木马；行李传送带；轮播)
indicator ( [‘ɪndɪkeɪtə] n. 指示器；[试剂] 指示剂；[计] 指示符；压力计)
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>插件之五：轮播</title>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
body{
margin: 400px 320px;
border: 2px solid lightslategrey;
}
div.item img{
width: 90%;
}
</style>
</head>
<body>
<h3>基本轮播</h3>
<div >
</div>
</div>
</div>
<h3>带标题的轮播</h3>
<div >梨子</div>
</div>
</div>
</div>
<h3>设置轮播的速度</h3>
<div >梨子</div>
</div>
</div>
</div>
<h3>控制轮播的方向</h3>
<div ></span>
</a>
</div>
</body>
</html>
原文：https://blog.csdn.net/sunxiaofre/article/details/62885365
