BootStrap一页通（样式+组件+插件）
bootstrap是一种前端框架，实现美观的页面效果。
使用BootStrap的前期工作（注意顺序）：
<!DOCTYPT html>；因为Bootstrap用到了h5的特性，所以需要此步。
导入jQuery；bootstrap需要jQuery才能正常工作，故需要导入 jquery.min.js
导入Bootstrap的css；定义各种样式。
导入Bootstrap的js；产生交互效果。
最后直接套用Bootstrap的class即可，达到想要的效果。
<!DOCTYPE html>
<html lang="en">
<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 lang="en">
<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 lang="en">
<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 lang="en">
<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="data:images/tree.JPG" class="img-rounded">
圆形：
<img src="data:images/tree.JPG" class="img-circle">
缩略图：
<img src="data: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 lang="en">
<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="" style="width: 200px; height: 200px; margin-left: 50px;">
文本框:<input type="text" class="form-control">
密码:<input type="password" class="form-control">
<textarea class="form-control" name="t1" id="t1" cols="30" rows="10" placeholder="个人简介"></textarea>
技能：<select class="form-control" name="" id="">
<option value="">HTML</option>
<option value="">CSS</option>
<option value="">JavaScript</option>
<option value="">jQuery</option>
<option value="">BootStrap</option>
<option value="">Node.js</option>
<option value="">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 lang="en">
<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 lang="en">
<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 lang="en">
<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="" id="">
<option value="">草莓</option>
<option value="">芒果</option>
<option value="">香蕉</option>
<option value="">蓝莓</option>
</select>
<div>
<div class="pull-left">左浮动</div>
<div class="pull-right">右浮动</div>
</div>
<div class="show">显示</div>
<div>000</div>
<div>111</div>
<div class="hidden">隐藏（不占位）222</div>
<div>333</div>
<div class="invisible">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 lang="en">
<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 lang="en">
<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 lang="en">
<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" id="dropdownMenu1" data-toggle="dropdown">
Hello
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li>
<a href="#">111</a>
</li>
<li role="presentation">
<a href="#">222</a>
</li>
<li role="presentation">
<a href="#">333</a>
</li>
<li role="presentation">
<a href="#">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" id="dropdownMenu2" data-toggle="dropdown">
Hello
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li class="dropdown-header">
1-2标题（不可点击）
</li>
<li>
<a href="#">111</a>
</li>
<li role="presentation">
<a href="#">222</a>
</li>
<li class="dropdown-header">
3-4标题（不可点击）
</li>
<li role="presentation">
<a href="#">333</a>
</li>
<li role="presentation">
<a href="#">444</a>
</li>
</ul>
</div>
<h3>菜单分割线</h3>
<!--<li role="presentation" class="divider"></li>-->
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu3" data-toggle="dropdown">
Hello
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li class="dropdown-header">
1-2标题（不可点击）
</li>
<li>
<a href="#">111</a>
</li>
<li role="presentation">
<a href="#">222</a>
</li>
<!--分割线-->
<li role="presentation" class="divider"></li>
<li class="dropdown-header">
3-4标题（不可点击）
</li>
<li role="presentation">
<a href="#">333</a>
</li>
<li role="presentation">
<a href="#">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" id="dropdownMenu4" data-toggle="dropdown">
Hello
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li class="dropdown-header">
1-2标题（不可点击）
</li>
<li>
<a href="#">111</a>
</li>
<li role="presentation">
<a href="#">222</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">
3-4标题（不可点击）
</li>
<li role="presentation">
<a href="#">333</a>
</li>
<li role="presentation" class="disabled">
<a href="#">444(开发中)</a>
</li>
</ul>
</div>
<div style="height: 100px;"></div>
</body>
</html>
1
3. 按钮
按钮组
按钮工具栏
按钮组大小
垂直排列的按钮组
复选框按钮组
单选框按钮组
<!DOCTYPE html>
<html lang="en">
<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" id="dropdownMenu1" data-toggle="dropdown">
默认值
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li><a href="#">吃</a></li>
<li><a href="#">穿</a></li>
<li><a href="#">住</a></li>
<li><a href="#">行</a></li>
</ul>
</div>
</body>
</html>
1
5. 输入框组
基本组合
尺寸
复选框和单选框
整合按钮
整合下拉菜单
<!DOCTYPE html>
<html lang="en">
<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" id="basic-addon1"></span>
<input type="text" class="form-control" placeholder="User Name" aria-describedby="basic-arron1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Mailbox" aria-describedby="basic-arron2">
<span class="input-group-addon" id="basic-arron2">@163.com</span>
</div>
<div class="input-group">
<span class="input-group-addon">¥</span>
<input type="text" class="form-control" placeholder="Amount" aria-label="Amount">
<span class="input-group-addon">.00</span>
</div>
<h3>尺寸</h3>
<div class="input-group input-group-lg">
<span class="input-group-addon" id="basic-addon3">@</span>
<input type="text" class="form-control" placeholder="User Name" aria-describedby="basic-arron3">
</div>
<div class="input-group input-group">
<span class="input-group-addon" id="basic-addon4">@</span>
<input type="text" class="form-control" placeholder="User Name" aria-describedby="basic-arron3">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon" id="basic-addon5">@</span>
<input type="text" class="form-control" placeholder="User Name" aria-describedby="basic-arron3">
</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 lang="en">
<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" style="width: 100px">
<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 lang="en">
<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 lang="en">
<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 lang="en">
<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 lang="en">
<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 lang="en">
<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" style="font-family: 宋体; font-weight: bold; font-size: 46px;">小小酥</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 lang="en">
<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 lang="en">
<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="data:images/xd.png"></a>
</div>
<div class="col-xs-4">
<a href="#" class="thumbnail"><img src="data:images/tree.JPG"></a>
</div>
<div class="col-xs-4">
<a href="#" class="thumbnail"><img src="data: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="data: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="data: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="data: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 lang="en">
<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 lang="en">
<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" style="width: 80%;"></div>
</div>
<h3>带提示的进度条</h3>
<div class="progress">
<div class="progress-bar" style="width: 30%; min-width: 1px;">30%</div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 0%;min-width: 2em">0%</div>
</div>
<h3>多彩进度条</h3>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width: 19%;">19%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" style="width: 36%;">36%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width: 99%;">99%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 100%;">100%</div>
</div>
<h3>条纹进度条</h3>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" style="width: 27%;">27%</div>
</div>
<h3>动条纹进度条</h3>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped active" style="width: 69%;">69%</div>
</div>
<h3>堆叠进度条</h3>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width: 19%;">19%</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 18%;">18%</div>
<div class="progress-bar progress-bar-success progress-bar-striped active" style="width: 30%;">30%</div>
</div>
</body>
</html>
=============================
16. 列表组
基本列表组
消息提示列表组
链接列表组
按钮列表组
多彩列表组
<!DOCTYPE html>
<html lang="en">
<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 lang="en">
<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 lang="en">
<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 lang="en">
<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 style="white-space: pre;">
此处省去一亿字。。。
此处省去一亿字。。。
此处省去一亿字。。。
此处省去一亿字。。。
此处省去一亿字。。。
此处省去一亿字。。。
此处省去一亿字。。。
</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 style="white-space: pre;">
此处省去一亿字。。。
此处省去一亿字。。。
此处省去一亿字。。。
此处省去一亿字。。。
此处省去一亿字。。。
</div>
<h3>尾部（不消失）</h3>
<div class="navbar navbar-default navbar-fixed-bottom"><div align="center">底部相关信息</div></div>
</body>
</html>
==============================================
———-
插件
1. 模态窗体
静态模态窗口
点击弹出
无动画效果
点击空白处不收起
使用JS控制模态窗口
监听模态的变化
modal
<!DOCTYPE html>
<html lang="en">
<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" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog">
<div class="modal-content">
<!--窗口头部-->
<div class="modal-header">
<button data-dismiss="madal" class="close" type="button">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4>留言板</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" type="button">取消</button>
<button class="btn btn-primary" type="button">确定</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" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1">
<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>我要留言</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" type="button">取消</button>
<button class="btn btn-success" type="button">提交</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" id="myModal2" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
<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>
</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" type="button">取消</button>
<button class="btn btn-primary" type="button">确定</button>
</div>
</div>
</div>
</div>
</body>
</html>
===================================================
<!DOCTYPE html>
<html lang="en">
<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" id="open">打开模态窗口</button>
<button class="btn btn-default" id="close">关闭模态窗口</button>
<button class="btn btn-default" id="toggle">切换模态窗口</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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>我要留言</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" type="button">取消</button>
<button class="btn btn-danger" id="submit" type="button">确定</button>
</div>
</div>
</div>
</div>
</body>
</html>
==========================================
<!DOCTYPE html>
<html lang="en">
<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" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="media-header">
<button data-dismiss="modal" class="close" type="button">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4>留言板</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-primary" type="button">取消</button>
<button class="btn btn-success" type="button">确定</button>
</div>
</div>
</div>
</div>
</body>
</html>
-----------------------------------------
2. 可切换导航栏
可切换导航栏
<!DOCTYPE html>
<html lang="en">
<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 id="myTab" class="nav nav-tabs">
<li class="active">
<a href="#mango" data-toggle="tab">芒果屋</a>
</li>
<li><a href="#berries" data-toggle="tab">草莓屋</a></li>
<li><a href="#passionFruit" data-toggle="tab">百香果屋</a></li>
<li class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">
其他水果屋
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li><a href="#apple" tabindex="-1" data-toggle="tab">苹果屋</a></li>
<li><a href="#pear" tabindex="-1" data-toggle="tab">香蕉屋</a></li>
</ul>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="mango">
<p>芒果。。。。。。。。。。。。。。。。。。。。。。。。。。。</p>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992889981&di=1400fed5d8f35b99515f91411b9ba788&imgtype=0&src=http%3A%2F%2Fwww.showlive.cn%2Fcollection%2FInfo20150624%2F220029100942.jpg">
</div>
<div class="tab-pane fade" id="berries">
<p>草莓。。。。。。。。。。。。。。。。。。。。。。。。。。。</p>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992785682&di=fdff5fa35be820ef6e9ba15b9b48ae20&imgtype=0&src=http%3A%2F%2Fimg2.xiukee.com%2Fupload%2F2015%2F5%2F21%2F205780034.jpg%40100q.jpg">
</div>
<div class="tab-pane fade" id="passionFruit">
<p>百香果。。。。。。。。。。。。。。。。。。。。。。。。。。</p>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992825786&di=f6a95f6dd88edd4f57b4f0c12369eeca&imgtype=0&src=http%3A%2F%2Fs16.sinaimg.cn%2Fbmiddle%2F002hzK4pty6NIILSXef9f%26690">
</div>
<div class="tab-pane fade" id="apple">
<p>苹果。。。。。。。。。。。。。。。。。。。。。。。。。。。</p>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992695902&di=1de2619fc945f01bea359e94f236be05&imgtype=0&src=http%3A%2F%2Fimg5q.duitang.com%2Fuploads%2Fblog%2F201405%2F09%2F20140509230410_irnBh.jpeg">
</div>
<div class="tab-pane fade" id="pear">
<p>梨子。。。。。。。。。。。。。。。。。。。。。。。。。。。</p>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992953361&di=4f8ffaa3fb56d7503fc2b883c38f9917&imgtype=0&src=http%3A%2F%2Fpic33.nipic.com%2F20130925%2F13620646_085341350000_2.jpg">
</div>
</div>
</body>
</html>
------------------------------------------
3. 提示工具
非Bootstrap工具提示
左侧提示
右侧提示
上方提示
下方提示
tooltip （n. 工具提示；提示信息；提示框；提示文本）
<!DOCTYPE html>
<html lang="en">
<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 style="margin-left: 100px" type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="left" title="提示信息">
鼠标悬停左侧提示信息
</button>
<h3>右侧提示信息</h3>
<button style="margin-right: 100px;" type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="right" title="提示信息">
鼠标悬停右侧提示信息
</button>
<h3>上方提示信息</h3>
<button style="margin-top: 60px;" type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="提示信息">
鼠标悬停上方提示信息
</button>
<h3>下方提示信息</h3>
<button style="margin-bottom: 60px;" type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="提示信息">
鼠标悬停下方提示信息
</button>
</body>
</html>
-----------------------------------------------------
4. 折叠
基本折叠
面板折叠
<!DOCTYPE html>
<html lang="en">
<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" id="mango">
<div class="well">
芒果是杧果的通俗名（拉丁学名：Mangifera indica L.），
芒果是一种原产印度的漆树科常绿大乔木，
叶革质，互生；花小，杂性，黄色或淡黄色，成顶生的圆锥花序。
核果大，压扁，长5-10厘米，宽3-4.5厘米，成熟时黄色，味甜，果核坚硬。
芒果为著名热带水果之一，芒果果实含有糖、蛋白质、粗纤维，芒果所含有的维生素A的前体胡萝卜素成分特别高，
是所有水果中少见的。其次维生素C含量也不低。矿物质、蛋白质、脂肪、糖类等，也是其主要营养成分。
可制果汁、果酱、罐头、腌渍、酸辣泡菜及芒果奶粉、蜜饯等。
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992889981&di=1400fed5d8f35b99515f91411b9ba788&imgtype=0&src=http%3A%2F%2Fwww.showlive.cn%2Fcollection%2FInfo20150624%2F220029100942.jpg">
</div>
</div>
<div class="collapse" id="berries">
<div class="well">
草莓（学名：Fragaria × ananassa Duch.），多年生草本，高10-40厘米。
茎低于叶或近相等，密被开.展黄色柔毛。叶三出，小叶具短柄，质地较厚，倒卵形或菱形，
上面深绿色，几无毛，下面淡白绿色，疏生毛，沿脉较密；叶柄密被开展黄色柔毛。
聚伞花序，花序下面具一短柄的小叶；花两性；萼片卵形，比副萼片稍长；
花瓣白色，近圆形或倒卵椭圆形。聚合果大，宿存萼片直立，紧贴于果实；
瘦果尖卵形，光滑。花期4-5月，果期6-7月。
原产南美，中国各地及欧洲等地广为栽培。草莓营养价值高，含有多种营养物质 ，且有保健功效。
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992785682&di=fdff5fa35be820ef6e9ba15b9b48ae20&imgtype=0&src=http%3A%2F%2Fimg2.xiukee.com%2Fupload%2F2015%2F5%2F21%2F205780034.jpg%40100q.jpg">
</div>
</div>
<div style="height: 100px;"></div>
</body>
</html>
--------------------------------------------
<!DOCTYPE html>
<html lang="en">
<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" id="accordion" role="tablist" aria-multiselectable="true">
<!--第一块面板-->
<div class="panel panel-default">
<!--头部-->
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Mango
</a>
</h4>
</div>
<!--内容-->
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
芒果。。。。。。。。。。。。。。。。。。。。。
</div>
</div>
</div>
<!--第二块面板-->
<div class="panel panel-default">
<!--头部-->
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Berries
</a>
</h4>
</div>
<!--内容-->
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
草莓。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
</div>
</div>
</div>
<!--第三块面板-->
<div class="panel panel-default">
<!--头部-->
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Orange
</a>
</h4>
</div>
<!--内容-->
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
香橙。。。。。。。。。。。。。。。。。。。。。。。。。
</div>
</div>
</div>
</div>
</body>
</html>
5. 轮播
基本轮播
带标题的轮播
设置轮播的速度
控制轮播的方向
carousel ( [‘kærə’sɛl] n. 旋转木马；行李传送带；轮播)
indicator ( [‘ɪndɪkeɪtə] n. 指示器；[试剂] 指示剂；[计] 指示符；压力计)
<!DOCTYPE html>
<html lang="en">
<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 id="carousel-example-generic1" class="carousel slide" data-ride="carousel">
<!--图片小圈圈指示器-->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic1" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic1" data-slide-to="1"></li>
<li data-target="#carousel-example-generic1" data-slide-to="2"></li>
<li data-target="#carousel-example-generic1" data-slide-to="3"></li>
</ol>
<!--幻灯片-->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992785682&di=fdff5fa35be820ef6e9ba15b9b48ae20&imgtype=0&src=http%3A%2F%2Fimg2.xiukee.com%2Fupload%2F2015%2F5%2F21%2F205780034.jpg%40100q.jpg">
</div>
<div class="item">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992825786&di=f6a95f6dd88edd4f57b4f0c12369eeca&imgtype=0&src=http%3A%2F%2Fs16.sinaimg.cn%2Fbmiddle%2F002hzK4pty6NIILSXef9f%26690">
</div>
<div class="item">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992695902&di=1de2619fc945f01bea359e94f236be05&imgtype=0&src=http%3A%2F%2Fimg5q.duitang.com%2Fuploads%2Fblog%2F201405%2F09%2F20140509230410_irnBh.jpeg">
</div>
<div class="item">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992953361&di=4f8ffaa3fb56d7503fc2b883c38f9917&imgtype=0&src=http%3A%2F%2Fpic33.nipic.com%2F20130925%2F13620646_085341350000_2.jpg">
</div>
</div>
</div>
<h3>带标题的轮播</h3>
<div id="carousel-example-generic2" class="carousel slide" data-ride="carousel">
<!--图片小圈圈指示器-->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic2" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic2" data-slide-to="1"></li>
<li data-target="#carousel-example-generic2" data-slide-to="2"></li>
<li data-target="#carousel-example-generic2" data-slide-to="3"></li>
</ol>
<!--幻灯片-->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992785682&di=fdff5fa35be820ef6e9ba15b9b48ae20&imgtype=0&src=http%3A%2F%2Fimg2.xiukee.com%2Fupload%2F2015%2F5%2F21%2F205780034.jpg%40100q.jpg">
<div class="carousel-caption">草莓</div>
</div>
<div class="item">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992825786&di=f6a95f6dd88edd4f57b4f0c12369eeca&imgtype=0&src=http%3A%2F%2Fs16.sinaimg.cn%2Fbmiddle%2F002hzK4pty6NIILSXef9f%26690">
<div class="carousel-caption">百香果</div>
</div>
<div class="item">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992695902&di=1de2619fc945f01bea359e94f236be05&imgtype=0&src=http%3A%2F%2Fimg5q.duitang.com%2Fuploads%2Fblog%2F201405%2F09%2F20140509230410_irnBh.jpeg">
<div class="carousel-caption">苹果</div>
</div>
<div class="item">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992953361&di=4f8ffaa3fb56d7503fc2b883c38f9917&imgtype=0&src=http%3A%2F%2Fpic33.nipic.com%2F20130925%2F13620646_085341350000_2.jpg">
<div class="carousel-caption">梨子</div>
</div>
</div>
</div>
<h3>设置轮播的速度</h3>
<div id="carousel-example-generic3" class="carousel slide" data-ride="carousel" data-interval="800">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic3" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic3" data-slide-to="1"></li>
<li data-target="#carousel-example-generic3" data-slide-to="2"></li>
<li data-target="#carousel-example-generic3" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992785682&di=fdff5fa35be820ef6e9ba15b9b48ae20&imgtype=0&src=http%3A%2F%2Fimg2.xiukee.com%2Fupload%2F2015%2F5%2F21%2F205780034.jpg%40100q.jpg">
<div class="carousel-caption">草莓</div>
</div>
<div class="item">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992825786&di=f6a95f6dd88edd4f57b4f0c12369eeca&imgtype=0&src=http%3A%2F%2Fs16.sinaimg.cn%2Fbmiddle%2F002hzK4pty6NIILSXef9f%26690">
<div class="carousel-caption">百香果</div>
</div>
<div class="item">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992695902&di=1de2619fc945f01bea359e94f236be05&imgtype=0&src=http%3A%2F%2Fimg5q.duitang.com%2Fuploads%2Fblog%2F201405%2F09%2F20140509230410_irnBh.jpeg">
<div class="carousel-caption">苹果</div>
</div>
<div class="item">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992953361&di=4f8ffaa3fb56d7503fc2b883c38f9917&imgtype=0&src=http%3A%2F%2Fpic33.nipic.com%2F20130925%2F13620646_085341350000_2.jpg">
<div class="carousel-caption">梨子</div>
</div>
</div>
</div>
<h3>控制轮播的方向</h3>
<div id="carousel-example-generic4" class="carousel slide" data-ride="carousel">
<!--图片小圈圈指示器-->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic4" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic4" data-slide-to="1"></li>
<li data-target="#carousel-example-generic4" data-slide-to="2"></li>
<li data-target="#carousel-example-generic4" data-slide-to="3"></li>
</ol>
<!--幻灯片-->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992785682&di=fdff5fa35be820ef6e9ba15b9b48ae20&imgtype=0&src=http%3A%2F%2Fimg2.xiukee.com%2Fupload%2F2015%2F5%2F21%2F205780034.jpg%40100q.jpg">
<div class="carousel-caption">草莓</div>
</div>
<div class="item">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992825786&di=f6a95f6dd88edd4f57b4f0c12369eeca&imgtype=0&src=http%3A%2F%2Fs16.sinaimg.cn%2Fbmiddle%2F002hzK4pty6NIILSXef9f%26690">
<div class="carousel-caption">百香果</div>
</div>
<div class="item">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992695902&di=1de2619fc945f01bea359e94f236be05&imgtype=0&src=http%3A%2F%2Fimg5q.duitang.com%2Fuploads%2Fblog%2F201405%2F09%2F20140509230410_irnBh.jpeg">
<div class="carousel-caption">苹果</div>
</div>
<div class="item">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992953361&di=4f8ffaa3fb56d7503fc2b883c38f9917&imgtype=0&src=http%3A%2F%2Fpic33.nipic.com%2F20130925%2F13620646_085341350000_2.jpg">
<div class="carousel-caption">梨子</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic4" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic4" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</a>
</div>
</body>
</html>
原文：https://blog.csdn.net/sunxiaofre/article/details/62885365
BootStrap一页通（样式+组件+插件）的更多相关文章
- Bootstrap 标签页（Tab）插件
摘自: http://www.runoob.com/bootstrap/bootstrap-tab-plugin.html Bootstrap 标签页(Tab)插件 标签页(Tab)在 Bootstr ...
- Bootstrap 栅格 样式 组件 插件
-----------------------------起先是我们造成习惯,后来是习惯造成我们. day 51 Bootstrap 官方网站: bootcss.com/ <!DOCTYP ...
- Bootstrap-Plugin：标签页（Tab）插件
ylbtech-Bootstrap-Plugin:标签页(Tab)插件 1.返回顶部 1. Bootstrap 标签页(Tab)插件 标签页(Tab)在 Bootstrap 导航元素 一章中介绍过.通 ...
- Sweetalert模态对话框与Swiper轮播插件、Bootstrap样式组件、AdminLTE后台管理模板地址
Sweetalert纯JS模态对话框插件地址:http://mishengqiang.com/sweetalert/ AdminLTE后台管理模板系统地址(基于Bootstrap):https://a ...
- 第二百四十五节，Bootstrap标签页和工具提示插件
Bootstrap标签页和工具提示插件 学习要点: 1.标签页 2.工具提示 本节课我们主要学习一下 Bootstrap 中的标签页和工具提示插件. 一．标签页选项卡 标签页也就是通常所说的选项卡功能 ...
- 第二百四十节，Bootstrap巨幕页头缩略图和警告框组件
Bootstrap巨幕页头缩略图和警告框组件 学习要点: 1.巨幕组件 2.页头组件 3.缩略图组件 4.警告框组件 本节课我们主要学习一下 Bootstrap 的四个组件功能:巨幕组件.页头组件.缩 ...
- Bootstrap标签页(Tab)插件事件
事件 下表列出了标签页(Tab)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.tab 该事件在标签页显示时触发,但是必须在新标签页被显示之前.分别使用 even ...
- m_Orchestrate learning system---六、善用组件插件的好处是什么
m_Orchestrate learning system---六.善用组件插件的好处是什么 一.总结 一句话总结: 1.面包屑导航是什么? 知道它是什么自然就知道它怎么用了 2.表格里面的栏目能能点 ...
- VUE常用UI组件插件及框架
UI组件及框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - ...
随机推荐
- orcale增量全量实时同步mysql可支持多库使用Kettle实现数据实时增量同步
1. 时间戳增量回滚同步 假定在源数据表中有一个字段会记录数据的新增或修改时间,可以通过它对数据在时间维度上进行排序.通过中间表记录每次更新的时间戳,在下一个同步周期时,通过这个时间戳同步该时间戳以后 ...
- windows下配置nutch注意的问题
1.为处理方便,直接在$nutch目录下创建一个名为url.txt文件,然后在文件里添加要搜索的网址,例如:http://www.sina.com.cn/,注意网址最后的"/"一定 ...
- Redhat系列使用ISO或者光盘制作yum本地安装源
适用系统:redhat系列 示例系统:CentOS 6x86_64 环境:虚拟机 有时候做实验又不能联网的情况下想装一款软件时,经常会搞的头大:难道要去系统镜像中一个个拷出来再用rpm安装?各种依 ...
- lua中类的实现原理和实践
一.基础概念 Lua 本身是函数式的语言,但借助 metatable (元表)这个强大的工具,Lua 实现操作符重载易如反掌.. 下文将详细的解释在Lua中实现类的原理,涉及到的细节点将拆分出来讲, ...
- eclipse导入maven项目时报Could not calculate build plan: Plugin org.apache.maven.plugins:maven-resources
在用Eclipse IDE for Java EE Developers进行maven项目的开发时,报错Could not calculate build plan: Plugin org.apach ...
- Java多线程详解(三)
1)死锁 两个线程相互等待对方释放同步监视器时会出现死锁的现象,这时所有的线程都处于阻塞状态,程序无法继续向下执行. 如下就是会出现死锁的程序. 首先flag = 1,线程d1开始执行,锁住对象o1, ...
- jQuery回溯
1.jQuery有个很好用的方法是 end(); 2.在进行链式操作时,使用end方法,可以回溯到上一个jQuery对象. 3.实现原理: jQuery内部有一个对象栈,当形成新的对象时,会将新对象推 ...
- POJ1125-Stockbroker Grapevine Floyd算法多源最短路径
这题的思路还是比较简单,用弗洛伊德算法打表后,枚举来找到最小值 代码如下 注意最后判断时候的语句 在这里错误了很多次 # include<iostream> # include<al ...
- linux 中怎样返回上一层目录的命令？
可以使用cd命令,cd命令的功能是切换到指定的目录:命令格式:cd [目录名]目录名有几个符号有特殊的含义,“..”代表上一级目录.“~”代表HOME目录.“-”代表前一目录.因此返回上一级目录可以使 ...
- jsp实现文件下载的代码（转载）
Java代码 OutputStream out=response.getOutputStream(); byte by[]=new byte[500]; File fileLoad=new Fil ...