组件基础
什么是组件
在 Bootstrap 中，组件是对网页中常用的公共代码的封装，使代码可以复用。Bootstrap 提供了各种各样的组件，如导航、表单、按钮、轮播图等。
组件的组成
Bootstrap 组件由结构和样式组成。
结构需要参考官方文档来编写。
样式是 Bootstrap 预定义好的，直接通过设置样式类（class）即可使用。
使用组件时，需要先查询官方文档，找到想用的组件；编写组件的 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
A simple primary alert—check it out!
A simple secondary alert—check it out!
A simple success alert—check it out!
A simple danger alert—check it out!
A simple warning alert—check it out!
A simple info alert—check it out!
A simple light alert—check it out!
A simple dark alert—check it out!
组件的优势和引入
组件可以复用
代码更易维护和管理
降低代码之间的耦合程度
提高开发效率
组件是模块化的
1
2
3
jQuery 文件
jQuery 是一个快速的、简洁的 JavaScript 库。
官网：jQuery
更多版本：jQuery CDN
CDN 引入：在联网情况下直接引入，其中，integrity 和 crossorigin 属性用于验证 jQuery 文件完整性，防止文件被篡改。
1
本地引入：进入 https://code.jquery.com/jquery-3.7.1.slim.js，选中文本存储在本地文件中再引入。
Bootstrap 常用组件
按钮
Bootstrap 中的按钮一般使用 < a > 标签、< button > 标签或 < input > 标签（type 为 button、submit 或 reset）定义，给这 3 种标签添加按钮样式类即可设置成 Bootstrap 提供的按钮效果。
类
描述
.btn
按钮的基础样式类
.btn-danger
危险按钮
.btn-lg
大号按钮
.btn-warning
警示按钮
.btn-sm
小号按钮
.btn-info
信息按钮
.btn-primary
主要按钮
.btn-light
亮色按钮
.btn-dark
暗色按钮
.btn-secondary
次要按钮
.btn-success
成功按钮
.btn-link
链接按钮
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
导航
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
面包屑导航 Breadcrumb
Bootstrap 常用组件提供了面包屑导航，通过为导航层次结构自动添加分隔符来实现面包屑导航的页面效果。
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
分页 Pagination
在前端页面开发的过程中，经常会使用到分页器的功能，分页器的功能是帮助用户快速的跳转到指定页码的页面，当用户想要打开指定页面时，不需要用户多次操作，实现了一步到位的效果，提高了用户的使用体验。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
列表 List-group
在学习 Bootstrap 常用组件之前，为了实现列表页面，我们首先要编写列表结构，然后再根据页面的样式需求编写 CSS 代码。
为了提高开发的效率，在 Bootstrap 中可以直接通过列表组件来实现列表页面结构。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
- 列表1
- 列表2
- 列表3
- 列表4
输入框组 Input-group
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
姓名
家庭住址
联系方式
Bootstrap 实现菜单功能
折叠菜单 Collapse
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
aria-controls="collapseExample"> Link with href
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the
user activates the relevant trigger.
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the
user activates the relevant trigger.
模仿 Bootstrap 编写折叠菜单代码。
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
aria-expanded="false" aria-controls="collapseExample"> =
Bootstrap v3 中文文档
Bootstrap v4 中文文档
Bootstrap v5 中文文档
网站实例
精选模板
Bootstrap v2 中文文档
下拉菜单 Dropdowns
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
菜单
Bootstrap 实现轮播图功能
轮播图
为 标签定义类名为 carousel-control-prev，表示设置左侧箭头的样式;定义 标签的 href 属性的值为 #carouselExampleControls，表示与轮播图最外层盒子绑定；定义 role 的值为 button 表示按钮角色;定义 data-slide 属性的值为 prev；表示查看上一张图片；在 标签的内部定义类名为 carousel-control-prev-icon 的 span 元素，表示左侧箭头图标；并且定义类名 sr-only 的 span 元素，设置内容为 Previous。
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
第一张图片
图片描述
第二张图片
图片描述
第三张图片
图片描述
第四张图片
图片描述
第五张图片
图片描述
第六张图片
图片描述
第七张图片
图片描述