BootStrap一页通（样式+组件+插件）

bootstrap是一种前端框架，实现美观的页面效果。
使用BootStrap的前期工作（注意顺序）：
；因为Bootstrap用到了h5的特性，所以需要此步。
导入jQuery；bootstrap需要jQuery才能正常工作，故需要导入 jquery.min.js
导入Bootstrap的css；定义各种样式。
导入Bootstrap的js；产生交互效果。
最后直接套用Bootstrap的class即可，达到想要的效果。










Bootstrap


1

基本样式
1. 按钮
- 按钮样式可用于：
- 按钮元素``
- 超链接``
- 按钮类型的input元素``
- 提交类型的input元素``
- 重置类型的input元素``

- 示例：
- 原始样式按钮
- 默认按钮
- 提交按钮
- 成功按钮
- 信息按钮
- 警告按钮
- 危险按钮
- 表现为链接
- 大按钮
- 小按钮
- 最小的的按钮
- 宽屏按钮
- 激活状态按钮
- 无效按钮
- 多种按钮样式混用
1
2











原始样式按钮：把button标签变为平面的样式，一般不用

原始样式按钮


默认按钮：无色按钮
默认按钮


提交按钮：用于提交数据
提交按钮


成功按钮：一般用于一系列操作的最后一步，例如购物车最后付款
成功按钮


信息按钮：点击显示更多信息
信息按钮


警告按钮：一般用于修改行为
警告按钮


危险按钮：一般用于严重行为，如删除
危险按钮


表现为链接：button标签表现为超链接，但仍是button标签
表现为链接


大按钮：引人注目
大按钮


小按钮：
小按钮


最小的按钮：
最小的按钮


宽屏按钮：水平方向占父容器的100%
宽屏按钮


激活状态按钮：按钮一直处于被按下的状态，一般用于显示一个需要很长时间的操作，如上传大文件
激活状态按钮


无效按钮：按钮表现为无效的状态，不可点击，如某些处于倒计时的状态
无效按钮


多种按钮样式混用：多种按钮的样式可以一起用
红包已过期

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

基本表格：有横向分割线，宽度占用父容器的。

姓名	岗位	状态
张三	前端开发	面试中
李四	java开发	待筛选
冯田	前端开发	已回绝
周舟	算法工程师	面试中
孙大大	前端开发	三面
刘萌	数据库工程师	简历待筛选

待斑马线的表格：

姓名	岗位	状态
张三	前端开发	面试中
李四	java开发	待筛选
冯田	前端开发	已回绝
周舟	算法工程师	面试中
孙大大	前端开发	三面
刘萌	数据库工程师	简历待筛选

带边框的表格：

姓名	岗位	状态
张三	前端开发	面试中
李四	java开发	待筛选
周舟	算法工程师	面试中
孙大大	前端开发	三面

鼠标悬停状态的表格：

姓名	岗位	状态
张三	前端开发	面试中
李四	java开发	待筛选
周舟	算法工程师	面试中
孙大大	前端开发	三面

更加紧凑的表格：

姓名	岗位	状态
张三	前端开发	面试中
李四	java开发	待筛选
周舟	算法工程师	面试中
孙大大	前端开发	三面

多种表格效果整合在一起：

姓名	岗位	状态
张三	前端开发	面试中
李四	java开发	待筛选
周舟	算法工程师	面试中
孙大大	前端开发	三面

激活样式

姓名	岗位	状态
张三	前端开发	面试中
李四	java开发	待筛选
冯田	前端开发	已回绝
周舟	算法工程师	面试中
孙大大	前端开发	三面
刘萌	数据库工程师	简历待筛选

成功样式1

姓名	岗位	状态
张三	前端开发	面试中
李四	java开发	待筛选
冯田	前端开发	已回绝
周舟	算法工程师	面试中
孙大大	前端开发	三面
刘萌	数据库工程师	简历待筛选

成功样式2

姓名	岗位	状态
张三	前端开发	面试中
李四	java开发	待筛选
冯田	前端开发	已回绝
周舟	算法工程师	面试中
孙大大	前端开发	三面
刘萌	数据库工程师	简历待筛选

信息样式

姓名	岗位	状态
张三	前端开发	面试中
李四	java开发	待筛选
冯田	前端开发	已回绝
周舟	算法工程师	面试中
孙大大	前端开发	三面
刘萌	数据库工程师	简历待筛选

警告样式

姓名	岗位	状态
张三	前端开发	面试中
李四	java开发	待筛选
冯田	前端开发	已回绝
周舟	算法工程师	面试中
孙大大	前端开发	三面
刘萌	数据库工程师	简历待筛选

危险样式

姓名	岗位	状态
张三	前端开发	面试中
李四	java开发	待筛选
冯田	前端开发	已回绝
周舟	算法工程师	面试中
孙大大	前端开发	三面
刘萌	数据库工程师	简历待筛选

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











圆角：

圆形：

缩略图：



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

文本框:

密码:

技能：
HTML
CSS
JavaScript
jQuery
BootStrap
Node.js
React

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

- 淡灰色文本`text-muted`：常用于说明性文字

- 强调文本 `text-primary`：强调行文字

- 操作成功文本`text-success`：提示成功行为

- 提示信息文本`text-info`：指导性文字

- 警告文本`text-warning`：警告文字

- 危险操作文本`text-danger`危险操作，如删除

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

- 强调的背景`bg-primary`

- 操作成功文字的背景`bg-success`

- 信息提示文字的背景`bg-info`

- 警告提示文字的背景`bg-warning`

- 危险提示文字的背景`bg-danger`

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

×

草莓
芒果
香蕉
蓝莓

左浮动

右浮动

显示

000

111

隐藏（不占位）222

333

444

555

666

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就是列。
- Bootstrap的栅格系统默认把一行分成12列。
1
2
3

container-->row-->col-xs-12

占12列

container-->row-->col-lg-6

占六列

占六列

container-->row-->col-sm-6

占六列

占六列

container-->row-->col-xs-1

占六列

占六列

container-->row-->col-xs-4

占四列

占四列

占四列

container-->row-->col-sm-3

占三列

占三列

占三列

占三列

container-->row-->col-xs-1

占一列

占一列

占一列

占一列

占一列

占一列

占一列

占一列

占一列

占一列

占一列

占一列

container-->row-->col-sm-8/5

占八列

占五列

1

98

———-
组件
1. 字体图标
一个字体图标
字体图标设置颜色
字体图标上加超链接 连接
在button上使用字体图标 按钮
更多字体图标（详见所有的bootstrap字体图标）

一个字体图标

字体图标设颜色

字体图标上加超链接

超链接

在button上使用字体图标

按钮

2. 下拉菜单
下拉菜单
标题不可以点击
分割线
禁用项

下拉菜单

Hello

• 
  111
  


• 
  222
  


• 
  333
  


• 
  444
  

标题不可点击

Hello

• 
  1-2标题（不可点击）
  


• 
  111
  


• 
  222
  


• 
  3-4标题（不可点击）
  


• 
  333
  


• 
  444
  

菜单分割线

Hello

• 
  1-2标题（不可点击）
  


• 
  111
  


• 
  222
  





• 
  3-4标题（不可点击）
  


• 
  333
  


• 
  444
  

禁用的菜单项

Hello

• 
  1-2标题（不可点击）
  


• 
  111
  


• 
  222
  




• 
  3-4标题（不可点击）
  


• 
  333
  


• 
  444(开发中)
  

1

3. 按钮
按钮组
按钮工具栏
按钮组大小
垂直排列的按钮组
复选框按钮组
单选框按钮组

按钮组

老大
老二
老幺

按钮工具栏

111
222
333

111
222
333

111
222
333

按钮组大小

老大
老二
老幺

老大
老二
老幺

老大
老二
老幺

老大
老二
老幺

垂直排列的按钮组

老大
老二
老幺

复选框

老大


老二


老幺

单选框

老大


老大


老大

1

4. 按钮式下拉菜单
单按钮下拉菜单
分裂式按钮下拉菜单
按钮大小
向上弹出式菜单

单按钮下拉菜单

其中：btn-default/btn-primary/btn-success/btn-info/btn-warning/btn-danger(此处只列出了btn-primary)

primary

• 
  吃
  


• 
  穿
  
• 
  住
  


• 
  行
  

分裂式按钮下拉菜单

默认

• 
  吃
  


• 
  穿
  
• 
  住
  


• 
  行
  

按钮大小

其中，btn-lg/btn/btn-sm/btn-xs（此处只列出了btn-lg）

大号

• 
  吃
  


• 
  穿
  
• 
  住
  


• 
  行
  

向上弹出式菜单

默认值

• 吃


• 穿


• 住


• 行

1

 

 

5. 输入框组
基本组合
尺寸
复选框和单选框
整合按钮
整合下拉菜单

基本组合

@163.com

¥

.00

尺寸

@

@

@

复选框和单选框

整合按钮

百度

Google

整合下拉菜单

data-toggle="dropdown" aria-expanded="false">
Search Engine

• Google


• Baidu




• Sogou


• YaHoo

Search Engine

• Google


• Baidu




• Sogou


• YaHoo

1
2

6. 导航栏
标签页
胶囊式标签页
垂直胶囊式标签页
禁用的链接

标签页

• 本科


• 研究生


• 博士生

胶囊式标签页

• 本科


• 硕士生


• 博士生

垂直胶囊式标签页

• 本科生


• 硕士生


• 博士生

禁用的标签链接

• 本科生


• 硕士生


• 博士生

1

7. 面包碎屑导航

面包碎屑导航

1. 本科生


2. 硕士生


3. 博士生

1

8. 分页
基本分页
禁用和激活状态
尺寸
翻页
两端对齐
翻页禁用状态

基本分页

• 
  
  «
  
  


• 1


• 2


• 3


• 4


• 5


• 
  
  »
  
  

禁用和激活状态

• 
  
  «
  
  


• 1


• 2


• 3


• 4


• 5


• 
  
  »
  
  

尺寸

• 
  
  «
  
  


• 1


• 2


• 3


• 
  
  »
  
  

• 
  
  «
  
  


• 1


• 2


• 3


• 
  
  »
  
  

• 
  
  «
  
  


• 1


• 2


• 3


• 
  
  »
  
  

翻页

• 上一页


• 此页


• 下一页

两端对齐

• ←上一页


• 下一页→

翻页禁用状态

• 上一页


• 下一页

1

9. 标签
默认标签
强调标签
成功标签
信息标签
警告标签
危险标签











默认标签
强调标签
成功标签
信息标签
警告标签
危险标签


1

10. 消息提示数字
超链接旁的消息数提示
按钮中的消息数提示

超链接旁的消息数提示

您的消息 24

按钮中的消息数提示

新短消息 6


1
2
3
4
5

11. 超大屏幕
jumbotron
[‘dʒʌmbəutrɔn]
n. 电视机的超大屏幕

小小酥

向这个世界，说出你的生活

加入我们

1

12. 副标题
class='page-header'
正副标题下面会有一条分割线

正标题 副标题

13. 缩略图
相册风格
自定义内容

相册风格缩略图

自定义缩略图

熊顿小样

收藏

小小树苗

收藏

熊顿言之

收藏

1

14. 警告
警告框
可关闭的警告框
警告框中的的超链接

警告框

操作成功

消息提示

警告提示

危险提示

可关闭的警告框

×

请关闭

警告中的超链接

重磅消息！！点击查看

重磅消息！！点击查看

重磅消息！！点击查看

重磅消息！！点击查看

1
9

15. 进度条
基本进度条
带提示的进度条
多彩进度条
条纹进度条
动条纹进度条
堆叠进度条

基本进度条

带提示的进度条

30%

0%

多彩进度条

19%

36%

99%

100%

条纹进度条

27%

动条纹进度条

69%

堆叠进度条

19%

18%

30%

=============================

16. 列表组
基本列表组
消息提示列表组
链接列表组
按钮列表组
多彩列表组

基本列表组

• 香草泡芙


• 草莓班戟


• 拿破仑


• 芒果千层

消息提示列表组

• 23香草泡芙


• 草莓班戟12


• 18拿破仑


• 2芒果千层

链接列表组

香草泡芙
草莓班戟
拿破仑
芒果千层

按钮列表组

香草泡芙
草莓班戟
拿破仑
芒果千层

多彩列表组

香草泡芙
草莓班戟
拿破仑
芒果千层

1
================================

17. 面板
基本面板
面板标题
面板脚注
彩色面板

基本面板

面板内容

面板标题

面板标题

面板内容

面板脚注

面板内容

面板脚注

彩色面板

panel-success\panel-warning\panel-danger\panel-info

面板标题

面板内容

面板脚注

=================================

18. 潜入效果
文字嵌入效果

嵌入文字的效果

文字嵌入效果

==============================

19. 头部尾部菜单
贴在头部（不消失）
贴在头部（会消失）
贴在尾部（不消失）

头部（不消失）

本科生
研究生
博士生

此处省去一亿字。。。
此处省去一亿字。。。
此处省去一亿字。。。
此处省去一亿字。。。
此处省去一亿字。。。
此处省去一亿字。。。
此处省去一亿字。。。

头部（会消失）

小学生
初中生
高中生

此处省去一亿字。。。
此处省去一亿字。。。
此处省去一亿字。。。
此处省去一亿字。。。
此处省去一亿字。。。

尾部（不消失）

底部相关信息

==============================================

———-
插件
1. 模态窗体
静态模态窗口
点击弹出
无动画效果
点击空白处不收起
使用JS控制模态窗口
监听模态的变化
modal

静态模态窗口

×
Close

留言板

留言内容

取消
发表

点击弹出窗口

我要留言

×
Close

留言板

留言内容

取消
确定

不要动画效果地弹出

我要留言

×
Close

我要留言

留言内容：

取消
提交

点击空白不会收起

留言板

×
Close

留言内容

取消
确定

===================================================

打开模态窗口
关闭模态窗口
切换模态窗口

×
Close

我要留言

留言内容

取消
确定

==========================================

点击留言

×
Close

留言板

留言内容

取消
确定

-----------------------------------------

 

 

2. 可切换导航栏
可切换导航栏

• 
  芒果屋
  


• 草莓屋


• 百香果屋


• 
  
  其他水果屋
  
  
  
  
  
  • 苹果屋
  
  
  • 香蕉屋

  
  

芒果。。。。。。。。。。。。。。。。。。。。。。。。。。。

草莓。。。。。。。。。。。。。。。。。。。。。。。。。。。

百香果。。。。。。。。。。。。。。。。。。。。。。。。。。

苹果。。。。。。。。。。。。。。。。。。。。。。。。。。。

梨子。。。。。。。。。。。。。。。。。。。。。。。。。。。

------------------------------------------

3. 提示工具
非Bootstrap工具提示
左侧提示
右侧提示
上方提示
下方提示
tooltip （n. 工具提示；提示信息；提示框；提示文本）

非Bootstrap工具提示

非Bootstrap工具提示

左侧提示信息

鼠标悬停左侧提示信息

右侧提示信息

鼠标悬停右侧提示信息

上方提示信息

鼠标悬停上方提示信息

下方提示信息

鼠标悬停下方提示信息

-----------------------------------------------------

4. 折叠
基本折叠
面板折叠

基本折叠

Mango
0

Berries

芒果是杧果的通俗名（拉丁学名：Mangifera indica L.），
芒果是一种原产印度的漆树科常绿大乔木，
叶革质，互生；花小，杂性，黄色或淡黄色，成顶生的圆锥花序。
核果大，压扁，长5-10厘米，宽3-4.5厘米，成熟时黄色，味甜，果核坚硬。
芒果为著名热带水果之一，芒果果实含有糖、蛋白质、粗纤维，芒果所含有的维生素A的前体胡萝卜素成分特别高，
是所有水果中少见的。其次维生素C含量也不低。矿物质、蛋白质、脂肪、糖类等，也是其主要营养成分。
可制果汁、果酱、罐头、腌渍、酸辣泡菜及芒果奶粉、蜜饯等。

草莓（学名：Fragaria × ananassa Duch.），多年生草本，高10-40厘米。
茎低于叶或近相等，密被开.展黄色柔毛。叶三出，小叶具短柄，质地较厚，倒卵形或菱形，
上面深绿色，几无毛，下面淡白绿色，疏生毛，沿脉较密；叶柄密被开展黄色柔毛。
聚伞花序，花序下面具一短柄的小叶；花两性；萼片卵形，比副萼片稍长；
花瓣白色，近圆形或倒卵椭圆形。聚合果大，宿存萼片直立，紧贴于果实；
瘦果尖卵形，光滑。花期4-5月，果期6-7月。
原产南美，中国各地及欧洲等地广为栽培。草莓营养价值高，含有多种营养物质 ，且有保健功效。

--------------------------------------------

Mango

芒果。。。。。。。。。。。。。。。。。。。。。

Berries

草莓。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

Orange

香橙。。。。。。。。。。。。。。。。。。。。。。。。。

5. 轮播
基本轮播
带标题的轮播
设置轮播的速度
控制轮播的方向
carousel ( [‘kærə’sɛl] n. 旋转木马；行李传送带；轮播)
indicator ( [‘ɪndɪkeɪtə] n. 指示器；[试剂] 指示剂；[计] 指示符；压力计)

基本轮播

带标题的轮播

草莓

百香果

苹果

梨子

设置轮播的速度

草莓

百香果

苹果

梨子

控制轮播的方向

草莓

百香果

苹果

梨子

原文：https://blog.csdn.net/sunxiaofre/article/details/62885365

转载于:https://www.cnblogs.com/klb561/p/9978545.html