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="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 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="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 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