Bootstrap5框架笔记
# BootStrap介绍
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript的。
# 其他说明
- Emmet插件中输入
lorem+ Table可以生成文字样例。 - Emmet插件中输入
lorem*3+ Table可以生成多行文字样例。 - 以
data-bs-开头的标签属性，都是与bootstrap相关的属性。
# Container
如果需要通过Bootstrap实现响应式页面，则需要将body代码放到定义了
container类的标签内，然后就可以在其中使用Bootstrap的其他响应式布局类，例如：<body> <!-- 在最外层div标签定义container类即可 --> <div class="container"> <div style="height: 50px; background: red;"></div> </div> </body>1
2
3
4
5
6class="container"- "固定宽度"的响应式布局容器。在浏览器不同宽度区间，显示不同的固定宽度。
Boostrap通过媒体查询来实现响应式布局：
@media (min-width: 576px) { ... }。决定不同显示宽度的区间分隔点也被称作为断点，比如：智能手机和平板之间的断点就是768px。
浏览器宽度区间 显示的固定宽度 常见设备 简写代码 小于576px 100% 老式手机 576 ~ 768px 540px 智能手机 sm 768 ~ 992px 720px 平板 md 992 ~ 1200px 960px 台式电脑中屏幕 lg 1200px ~ 1400px 1140px 笔记本电脑 xl 大于1400px 1320px 台式电脑大屏幕 xxl - Bootstrap中大多数响应式布局类名都是
***-[sm|md|lg|xl|xxl]-***...的格式。
- Bootstrap中大多数响应式布局类名都是
class="container-fluid"- "流体宽度"的响应式布局容器。- 在浏览器不同宽度区间，都显示100%宽度，相当于
width: 100%。
- 在浏览器不同宽度区间，都显示100%宽度，相当于
# 栅格系统
Bootstrap通过栅格系统使我们能够快速的构建一个响应式页面，栅格系统可以将div标签分为十二列，使我们可以方便的将元素放到想要的位置。
基本使用
使用栅格系统需要先定义使用了
.row类的div标签，然后再在其中定义标签并使用.col-[1~12]类指定该标签要占的格子，例如：<div class="container"> <div class="row"> <div class="col-6" style="height: 50px; background: green;"></div> <div class="col-3" style="height: 50px; background: blue;"></div> <div class="col-1" style="height: 50px; background: red;"></div> <div class="col-1" style="height: 50px; background: grey;"></div> <!-- 如果定义的标签超过了12列，则放不下的标签会放到下一行 --> <div class="col-1" style="height: 50px; background: grey;"></div> </div> </div>1
2
3
4
5
6
7
8
9
10如果定义的标签超过了12列，则一行内放不下的标签会放到下一行。
响应式使用
如果需要按照页面宽度响应式的修改栅格布局，则需要在列标签中通过
.col-[sm|md|lg|xl|xxl]-[1~12]类来指定不同的固定宽度下标签要占的格子，例如：<div class="container"> <div class="row"> <div class="col-sm-12 col-md-6" style="height: 50px; background: green;"></div> <div class="col-sm-6 col-md-3" style="height: 50px; background: blue;"></div> <div class="col-sm-6 col-md-3" style="height: 50px; background: red;"></div> </div> </div>1
2
3
4
5
6
7- 页面布局中一般屏幕宽度越小，每个标签所占的格子就应当越多些，以方便用户阅读。
行列
.row-cols-[1~5]- 该类可以控制网格中每一行最多有多少个列，超出的列元素会自动换行展示。- 只有在用到
.row类的标签中添加才会生效。 - 网格中的元素要用
<div class="col"></div>包裹。 - 网格中的元素可以通过g-*来控制间距。
- 只有在用到
.row-cols-[sm|md|lg|xl|xxl]-[1~5]- 响应式设置行列。例如：
<div class="container"> <div class="row row-cols-2"> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> </div> </div>1
2
3
4
5
6
7
8
# 小工具
Bootstrap4提供了一些小工具，可以让我们不用写CSS代码就能实现想要的效果，同时还可以实现响应式。.开头是类，--开头是CSS属性。
# display
.d-none- 同等于设置display: none;，隐藏元素。.d-flex- 同等于设置display: flex;，转换元素为弹性盒。.d-block- 同等于设置display: block;，转换元素为块级元素。.d-inline- 同等于设置display: block;，转换元素为行内元素。.d-inline-block- 同等于设置display: inline-block;，转换元素为行内块级元素。.d-[sm|md|lg|xl|xxl]-[flex|block|inline|inline-block|none]- 响应式转换元素。例如：
屏幕尺寸 类 隐藏所有 .d-none仅在 xs 上隐藏 .d-none .d-sm-block仅在 sm 上隐藏 .d-sm-none .d-md-block仅在 xs/sm 上隐藏 .d-none .d-md-block仅在 md 上隐藏 .d-md-none .d-lg-block仅在 lg 上隐藏 .d-lg-none .d-xl-block仅在 xl 上隐藏 .d-xl-none .d-xxl-block仅在 xxl 上隐藏 .d-xxl-none所有可见 .d-block仅在 xs 上可见 .d-block .d-sm-none仅在 sm 上可见 .d-none .d-sm-block .d-md-none仅在 md 上可见 .d-none .d-md-block .d-lg-none仅在 lg 上可见 .d-none .d-lg-block .d-xl-none仅在 xl 上可见 .d-none .d-xl-block .d-xxl-none仅在 xxl 上可见 .d-none .d-xxl-block
# 浮动
.clearfix- 用于清除浮动。.float-start- 浮动到左边。.float-end- 浮动到右边。.float-[sm|md|lg|xl|xxl]-[start|end]设置响应式浮动。
# 边距
- 方便设置边距的类，格式：
{property}{sides}-{breakpoint}-{size}，例如：mt-0、mt-sm-2、p-1、mx-auto。 - property代表属性，包含：
m- 用来设置marginp- 用来设置padding
- sides主要指方向：
留空- 用来设置元素在四个方向的margin或paddingt- 用来设置margin-top或padding-topb- 用来设置margin-bottom或padding-bottoms- 用来设置margin-left或padding-lefte- 用来设置margin-right或padding-rightx- 用来设置*-left和*-righty- 用来设置*-top和*-bottom
- breakpoints指的是屏幕宽度，设置响应式布局会用到：
留空- (<=576px)sm- (>=576px)md- (>=768px)lg- (>=992px)xl- (>=1200px)xxl- (>=1400px)
- size指的是边距的大小：
0- 设置margin或padding为01- 设置margin或padding为$spacer * 0.252- 设置margin或padding为$spacer * 0.53- 设置margin或padding为$spacer4- 设置margin或padding为$spacer * 1.55- 设置margin或padding为$spacer * 3auto- 设置margin为 auto- 外边距margin可以设置负数，在数字前面添加字母 "n" :
n1- 设置 margin 为 -0.25rem (如果 font-size 为 16px 则为 -4px )n2- 设置 margin 为 -0.5rem (如果 font-size 为 16px 则为 -8px)n3- 设置 margin 为 -1rem (如果 font-size 为 16px 则为 -16px)n4- 设置 margin 为 -1.5rem (如果 font-size 为 16px 则为 -24px)n5- 设置 margin 为 -3rem (如果 font-size 为 16px 则为 -48px)
# 背景颜色
.bg-primary- 设置背景颜色为蓝色。.bg-secondary- 设置背景颜色为灰色。.bg-success- 设置背景颜色为绿色。.bg-info- 设置背景颜色为青色。.bg-warning- 设置背景颜色为黄色。.bg-danger- 设置背景颜色为红色。.bg-light- 设置背景颜色为白色。.bg-dark- 设置背景颜色为黑色。--bs-bg-opacity- 设置背景透明度。
# 图片
.img-fluid- 同等于设置max-width: 100%; height: auto;，使得图片响应式缩放。.img-thumbnail- 会在图片外侧添加一个1px的边框。.text-center- 将行内元素水平居中。
# 尺寸
.w-[25|50|75|100]- 用于设置标签宽度百分比，比如：.w-25同等于weidth: 25%。.mw-100- 设置标签最大100%宽度。.h-[25|50|75|100]- 用于设置标签高度百分比。.mh-100- 设置标签最大100%高度。.vh-100- 相对于浏览器窗口设置标签100%高度。.vw-100- 相对于浏览器窗口设置标签100%宽度。
# 边框
.border- 设定标签边框.border-[1~5]- 设定边框宽度，需要同时设定.border.border-[top|down|left|right]- 只设定某个方向的边框.border-[top|down|left|right]-0- 去除某个方向的边框.border-[primary|secondary|success...]- 设定边框颜色
# 圆角
.rounded- 设定圆角.rounded-[0~5]- 设定指定大小的圆角.rounded-[top|bottom|start|end]- 设定指定方向的圆角.rounded-[top|bottom|start|end]-[0~5]- 设定指定方向、指定大小的圆角.rounded-circle- 设定圆形圆角.rounded-pill- 设定胶囊形圆角，标签是长方形时才看的出区别.rounded-[top|bottom|start|end]-[circle|pill]- 设定指定方向的圆形或胶囊形圆角
# 互动
.user-select-all- 单击文本时选中整个标签内的文本内容。.user-select-none- 禁用文本选择。- 可以防止通过鼠标选择进行复制，或者防止点击按钮的label时选中文字。
.pe-none- 禁用标签默认行为，比如a标签使用该类后，会变的无法进行跳转。
# 透明度
.opacity-[25|50|75|100]- 控制标签透明度
# 溢出
.overflow-auto- 如果标签内容超出父标签则显示滚动条，同等于overflow: auto;。.overflow-hidden- 如果标签内容超出父标签则隐藏。.overflow-visible- 如果标签超出父标签则仍然显示超出的部分 (默认).overflow-scroll- 始终展示左右和上下的滚动条。.overflow-[x|y]-[auto|hidden|visible|scroll]- 水平或者垂直方向进行溢出处理。- 比如：
overflow-x-auto，如果标签内容超出父标签则会生成左右滚动条。
- 比如：
# 弹性盒
Flex 全称Flexible Box布局模型，也称为弹性盒或弹性布局，它是常用的CSS3布局方式，可以用少量的代码高效的实现各种页面布局。
弹性盒类：对盒内元素整体进行设置
.d-flex- 给标签添加弹性盒属性，同等于display: flex;。.flex-[row|column]- 将弹性盒主轴方向设为水平方向(默认)或垂直方向，盒内的子元素(item)会以水平或垂直方向一个一个排列。.flex-[row|column]-reverse- 将弹性盒主轴方向设为水平或垂直方向，并进行反向排列，起始位置和结束位置互换，位置关系类似于上下或左右的镜像反转。.flex-[sm|md|xl|xxl]-[row|column]{-reverse}- 响应式设置方向、是否反转。.justify-content-start- 盒内子元素靠向起始位置对齐。.justify-content-center- 中间位置对齐。.ustify-content-end- 结束位置对齐。.
justify-content-between- 两侧边缘对齐。.justify-content-around- 平均居中对齐。.justify-content-evenly- 间距等分对齐。.
align-items-start- 盒内子元素垂直靠向起始位置对齐。.align-items-center- 盒内子元素垂直靠向中间位置对齐。.align-items-end- 盒内子元素垂直靠向结束位置对齐。
弹性盒子元素类：仅对单一子元素进行设置
.align-self-start- 单一子元素垂直靠向起始位置对齐。.align-self-center- 单一子元素垂直靠向中间位置对齐。.align-self-end- 单一子元素垂直靠向结束位置对齐。.ms-auto- 可以通过设置边距将单一子元素挤到盒子最右侧。.mt-auto- 可以通过设置边距将单一子元素挤到盒子最右侧。.order-[0~5]- 单一子元素设置排序优先级，值越大优先级越高，元素的排序位置越靠近起始位置。
# 阴影
.shadow- 标签设置阴影。.shadow-[sm|md|lg|xl|xxl]- 响应式设置阴影。
# 文本
.text-start- 行内元素靠左对齐。.text-center- 行内元素文本居中对齐。.text-end- 行内元素靠右对齐。.text-[sm|md|lg|xl|xxl]-[start|center|end]- 响应式设置文本对齐方式。.text-muted- 使文本显示更淡。.text-truncate- 文本过长时，截断文本并使用...进行省略，需要同时设置.d-inline-block或.d-block类，截断长度由max-width样式属性决定。.text-wrap- 文本超出父标签宽度时进行换行。.fs-[1~6]- 设置文本大小，数值与大小的关系可以参考h1~h6标签。.lh-[1|sm|base|lg]- 设置文本行高，其中base为默认行高。text-reset- 使文本颜色保持统一，比如将a标签的文本颜色设为和父标签的字体颜色一致。- 文本颜色
.text-primary- 设置字体颜色为蓝色。.text-secondary- 设置字体颜色为灰色。.text-success- 设置字体颜色为绿色。.text-info- 设置字体颜色为青色。.text-warning- 设置字体颜色为黄色。.text-danger- 设置字体颜色为红色。.text-light- 设置字体颜色为白色。.text-dark- 设置字体颜色为黑色。--bs-text-opacity- 设置字体透明度。
- 文本大小写
.text-lowercase- 文本转化为全小写。.text-uppercase- 文本转化为全大写。.text-capitalize- 文本转化为单词首字母开头。
# z-index
.z-[n1|0|1|2|3]- 设置z-index轴，值越大越优先显示。
# 可见性
.visible- 将标签可见性设为可见，同等于visibility: visible !important;。.invisible- 将标签可见性设为隐藏，同等于visibility: hidden !important;。
# 网格间距
- 只有在用到
.row类的标签中添加才有效，也支持响应式，使用方法也是在中间加上-[sm|md|lg|xl|xxl]。 .g-[0~5]- 控制网格系统中元素在垂直、水平方向的排序间距。.gx-[0~5]- 控制网格系统中元素在水平方向的排序间距。.gy-[0~5]- 控制网格系统中元素在垂直方向的排序间距。
# 表格
.table- 设定表格基本样式。.table-bordered- 给表格添加边框样式。.table-striped- 给表格添加行间隔条纹。.table-hover- 鼠标移动到表格时有焦点样式。.table-dark- 修改表格主题色为黑色样式。<table class="table table-bordered table-striped table-hover table-dark text-center"> <thead> <tr> <th>ID</th> <th>标题</th> <th>作者</th> <th>时间</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>从零开始的异世界生活</td> <td>雪豹</td> <td>2023-04-09 11:00:00</td> </tr> <tr> <td>2</td> <td>我是大饼</td> <td>大饼</td> <td>2023-04-09 13:00:00</td> </tr> </tbody> </table>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 按钮
.btn- 使用按钮样式。.btn-close- 使用"X"关闭图标按钮样式。- 不要写文本内容，会和关闭图标重叠。
.btn-[sm|md|lg|xl|xxl]- 设定按钮大小。.btn-primary- 设置按钮颜色为蓝色。.btn-secondary- 设置按钮颜色为灰色。.btn-success- 设置按钮颜色为绿色。.btn-info- 设置按钮颜色为青色。.btn-warning- 设置按钮颜色为黄色。.btn-danger- 设置按钮颜色为红色。.btn-light- 设置按钮颜色为白色。.btn-dark- 设置按钮颜色为黑色。
# 图标
- Bootstrap提供一系列免费图标供我们使用：
https://icons.bootcss.com/ - 使用方式
- 首先官网下载图标库文件压缩包。
- 然后将字体文件放到静态文件目录fonts/中，而css文件放到css/目录中。
- 然后修改
bootstrap-icons.css文件中的字体文件路径为正确路径，让Bootstrap可以正常请求到，比如将./fonts/改成../../fonts/，具体以字体文件和css文件的实际位置情况为准。 - 然后HTML文件中引入
bootstrap-icons.css文件。 - 然后就可以用
<i class="bi bi-apple"></i>的方式引入图标了。
# 表单
.form-label- 使用表单标签样式，在label标签中使用。.form-control- 使用表单控件基本外框样式，在textarea、text、password、file等表单控件的input标签中使用。.form-control-[sm|md|lg|xl|xxl]- 设置表单控件大小。.form-control-plaintext- 无外边框编辑框。.form-text- 表单文本，可用来提示输入值规范。readonly disabled- 标签属性，使表单控件只读、禁用。checked- 标签属性，表示已选中。
# 单选框和复选框
.form-check- 多选框或单选框div标签中添加，表示使用选择框样式。.form-switch- 多选框或单选框div标签中添加，表示使用选择框开关胶囊型样式。.form-check-inline- 多选框或单选框div标签中添加，表示将div标签内各个元素按水平方向排列。.form-check-input- 多选框或单选框input标签中添加，表示使用选择框样式。.form-check-label- 多选框或单选框label标签中添加，表示使用选择框label样式。.form-check-reverse- 多选框或单选框div标签中添加，表示反转的元素顺序。例如：
<!-- 单选框 --> <div class="mt-3"> <label class="form-label">性 别</label> <div> <div class="form-check form-check-inline form-check-reverse"> <input name="gender" value="man" id="id-check-man" type="radio" class="form-check-input"> <label for="id-check-man" class="form-check-label">男</label> </div> <div class="form-check form-check-inline form-check-reverse"> <input name="gender" value="woman" id="id-check-woman" type="radio" class="form-check-input"> <label for="id-check-woman" class="form-check-label">女</label> </div> </div> </div> <!-- 多选框 --> <div class="mt-3"> <label class="form-label">兴 趣</label> <div class="form-check form-check-inline form-switch"> <input name="favor" value="tea" id="id-check-tea" type="checkbox" class="form-check-input"> <label for="id-check-tea" class="form-check-label user-select-none">喝茶</label> </div> <div class="form-check form-check-inline form-switch"> <input name="favor" value="basketball" id="id-check-basketball" type="checkbox" class="form-check-input"> <label for="id-check-basketball" class="form-check-label user-select-none">打篮球</label> </div> </div>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
# 下拉选择框
.form-select- 给select下拉选择标签加上样式。.form-select-[sm|md|lg|xl|xxl]- 给下拉选择标签设置大小。selected- 标签属性，表示选项已选中。例如：
<div class="mt-3"> <label for="id-favor" class="form-label">兴 趣</label> <select name="favor" id="id-favor" class="form-select"> <option value="" selected disabled>---- 请选择您的兴趣 ----</option> <option value="tea">喝茶</option> <option value="basketball">打篮球</option> </select> </div>1
2
3
4
5
6
7
8
# 颜色选择框
.form-control-color- 颜色选择框input标签中添加，使用颜色框样式，需要和form-control一起用。例如：
<div class="mt-3"> <label for="id-theme-color" class="form-label">颜 色</label> <input type="color" id="id-theme-color" class="form-control form-control-color" value="#60b9e3"> </div>1
2
3
4
# 滑块
.form-range- 滑块框input标签中添加，使用滑块样式。min="0" max="10" step="1"- 滑块类型input标签属性，设置最小值、最大值、步长例如：
<div class="mt-3"> <label for="id-money" class="form-label">金 额</label> <input type="range" id="id-money" class="form-range" min="0" max="1000" step="1" value="5"> </div>1
2
3
4
# 水平展示表单控件
如果需要将表单控件水平展示，则需要用到栅格系统。
.col-form-label- 使同一行内的标签和控件标签水平对齐。- 比如当使用栅格系统将label标签和控件放在同一行时，文字默认是没有水平对齐控件的，所以需要在label标签上加上该类，使得水平对齐得更为美观。
- 另外如果label使用了该类，但是还没有对齐，那么也可以对同一行的控件标签也使用该类试试。
例如：
<!-- 文本编辑框 --> <div class="row"> <!-- 用户名输入框 --> <label for="username" class="col-form-label col-2 text-end">用户名：</label> <div class="col-4"><input id="username" type="text" class="form-control"></div> <!-- 密码输入框 --> <label for="username" class="col-form-label col-2 text-end">密 码：</label> <div class="col-4"><input id="password" type="password" class="form-control"></div> </div> <!-- 单选框与下拉选择框 --> <div class="row mt-3"> <label class="col-form-label col-2 text-end">性 别：</label> <div class="col-3"> <div class="form-check form-check-inline col-form-label"> <input name="gender" value="man" id="check-man" type="radio" class="form-check-input"> <label for="check-man" class="form-check-label">男</label> </div> <div class="form-check form-check-inline"> <input name="gender" value="woman" id="check-woman" type="radio" class="form-check-input"> <label for="check-woman" class="form-check-label">女</label> </div> </div> <label for="favor" class="col-form-label col-2 text-end">兴 趣：</label> <div class="col-5"> <select name="favor" id="favor" class="form-select"> <option value="" selected disabled>---- 请选择您的兴趣 ----</option> <option value="tea">喝茶</option> <option value="basketball">打篮球</option> </select> </div> </div>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
# 表单组
.input-group- 表单组的div标签中添加，表示使用表单组样式，能将任意表单控件按标签顺序组合起来。.input-group-text- 表单组中的div或span标签中添加，可以将表单控件组合进组中。例如：
<div class="input-group"> <div class="input-group-text"> <input type="checkbox" class="form-check-input mt-0"> </div> <input type="text" class="form-control"> <span class="input-group-text" id="addon-wrapping">@</span> <input type="text" class="form-control"> <input type="text" class="form-control"> <button class="btn btn-outline-primary">验证前面</button> <button class="btn btn-success">验证后面</button> </div>1
2
3
4
5
6
7
8
9
10
11
# 编辑框浮动动画
.form-floating- 表单组的div标签中添加，表示使用获得焦点时的浮动效果。- 会将div标签中的label标签文字放到Input框内，并在编辑框获得焦点时，将label标签文字以更小更淡的动画浮动到左上角。
- **注意：**input标签必须放到div内第一的位置，且input标签内必须有
placeholder="xxx"属性，因为浮动效果依赖于:placeholder-shown伪元素。 placeholder="xxx"- 用于提示编辑框预期值相关信息。该提示默认会在编辑框为空时显示，并会在鼠标点击编辑框，获得焦点时消失。但在使用.form-floating时其中的信息不会展示出来，因此可以用空格代替。
例如：
<div class="form-floating mt-3"> <input type="text" class="form-control" id="id-username" placeholder=" "> <label for="id-username">用 户 名</label> </div> <div class="form-floating mt-3"> <textarea class="form-control" id="id-comment" placeholder=" " style="height: 100px"></textarea> <label for="id-comment">评 论</label> </div>1
2
3
4
5
6
7
8
# 折叠组件
折叠组件用于将内容折叠或者展开。
折叠状态相关类
.collapse- 在要折叠的标签中添加，表示折叠内容，一般会用在div标签上。.collapsing- 切换折叠状态时会被使用。.collapse+.show- 在展开折叠内容时会被使用。.collapse-horizontal- 在要折叠的标签中添加，会以水平方向进行折叠/展示。
切换折叠状态方法
在button按钮标签中使用data-bs-toggle和data-bs-target属性。或者在a标签中使用data-bs-toggle和href属性，但从语义的角度不推荐。
data-bs-toggle="collapse"- 标签属性，表示要切换的事件类型，此处为折叠。data-bs-target="要切换折叠状态的标签的ID或类"- 标签属性，表示要操作的事件对象。- 可以指定
#标签ID、也可以指定.类，指定类可以一次性操作多个标签。
- 可以指定
例如：
<!-- 同时切换单个折叠标签 --> <a class="btn btn-primary" data-bs-toggle="collapse" href="#id-test-collapse">收起/展开</a> <button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#id-test-collapse">收起/展开</button> <div id="id-test-collapse" class="collapse"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Natus aspernatur fugiat dolore suscipit adipisci et aperiam praesentium iste molestiae dignissimos obcaecati tenetur beatae, necessitatibus dolorem atque ipsam voluptatem nulla laborum? </div> <!-- 同时切换多个折叠标签 --> <button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target=".test-collapse-class">收起/展开</button> <div class="collapse test-collapse-class"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Natus aspernatur fugiat dolore suscipit adipisci et aperiam praesentium iste molestiae dignissimos obcaecati tenetur beatae, necessitatibus dolorem atque ipsam voluptatem nulla laborum? </div> <div class="collapse test-collapse-class"> Iure dolor consequatur, alias dolore sapiente sequi placeat dicta aperiam harum quas sunt aspernatur repudiandae fugiat perspiciatis beatae numquam deserunt quidem minus modi. Officiis eos necessitatibus quo animi fugiat. Fugiat. </div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 手风琴组件
手风琴实际就是一组折叠组件在一起整合在一起，我们将其称作手风琴。
.accordion- 在手风琴div标签中添加，表示定义一个手风琴。.accordion-item- 在手风琴子元素div标签中添加，表示定义一个手风琴子项目。.accordion-flush- 在手风琴div标签中添加，表示移除手风琴默认的边框、圆角、背景颜色。data-bs-parent="#手风琴div标签ID"- 标签属性，表示标签所属的父标签。- 手风琴组件中，要在折叠对象标签中添加，同时指定所属的手风琴标签ID。
- 折叠对象标签设置该属性后，则手风琴内一次只能同时展开一个折叠对象，同一手风琴内的其他的折叠对象会自动折叠。
- 反之如果折叠对象标签不设置该属性，则可以一次展开多个折叠对象。
例如：
<div id="id-test-parent" class="accordion mt-5 mx-auto w-75"> <div class="accordion-item"> <!-- 设置手风琴子元素头部样式 --> <h2 class="accordion-header"> <!-- 设置手风琴item按钮样式，同时链接折叠对象 --> <!-- 有.collapsed类则为折叠状态的样式，没有.collapsed类则为展开状态的样式 --> <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#intro">公司介绍</button> </h2> <!-- 手风琴内使用折叠类需要额外引用.accordion-collapse类 --> <div id="intro" class="accordion-collapse collapse show" data-bs-parent="#id-test-parent"> <!-- 设置手风琴子元素身体样式 --> <div class="accordion-body"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem impedit perferendis. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#contact">联系方式</button> </h2> <div id="contact" class="accordion-collapse collapse" data-bs-parent="#id-test-parent"> <div class="accordion-body"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem impedit perferendis. </div> </div> </div> </div>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
# 警告框
.alert- 警告框div标签中添加，表示使用警告框样式。.alert-link- 警告框div标签内的a标签中添加，表示使用和警告框颜色相匹配的a标签样式。.alert-[primary|secondary|success|...]- 设置警告框颜色。关闭按钮
.alert-dismissible- 警告框div标签中添加，表示将div标签中的按钮往最右边放。.fade和.show- 警告框div标签中添加，表示关闭警告框时展示动画效果。data-bs-dismiss="alert"- 标签属性，只有携带了该属性的按钮标签，在被单击时才会触发JavaScript代码进行关闭。例如：
<div class="alert alert-success alert-dismissible fade show" role="alert"> Hello World! <button type="button" class="btn-close" data-bs-dismiss="alert"></button> </div>1
2
3
4
# 徽章
徽章是一种小型的、用于计数、打标签的组件。
.badge- 徽章一般在span标签中添加，表示使用徽章样式。.rounded-[pill|circle]- 在徽章span标签中添加，表示使用胶囊形、圆形徽章样式。.text-bg-[primary|secondary|success|...]- 设置徽章背景颜色。例如：
<!-- 标题中的方形圆角徽章 --> <h4>Hello, World! <span class="badge text-bg-secondary">New</span></h4> <!-- 按钮中的方形圆角徽章 --> <button class="btn btn-primary mt-5"> 通知 <span class="badge text-bg-danger">New</span> </button> <!-- 按钮右上角的胶囊型徽章 --> <button class="btn btn-primary position-relative mt-5"> 通知 <span class="badge rounded-pill text-bg-danger position-absolute translate-middle top-0 start-100">99+</span> </button> <!-- 按钮右上角的圆点徽章，使用其他工具类代替.badge类实现徽章 --> <button class="btn btn-primary position-relative mt-5"> 通知 <span class="border border-light rounded-circle p-2 bg-danger position-absolute translate-middle top-0 start-100"></span> </button>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 面包屑导航
面包屑导航用于展示当前页面在导航层级中的位置，并且会在各导航层级之间添加分隔符。
<nav>- 导航一般都会放到nav标签内，以表示这是一个导航。.breadcrumb- 在面包屑导航ol标签中添加，表示使用面包屑导航样式。.breadcrumb-item- 在面包屑导航标签内的li标签中添加，表示使用面包屑导航层级样式。.active- 在面包屑导航标签内的li标签中添加，表示该层级是当前所处的导航层级。--bs-breadcrumb-divider- 样式属性，用于自定义分隔符，在nav导航标签中添加该样式属性即可。例如：
<nav style="--bs-breadcrumb-divider: '>';"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Library</a></li> <li class="breadcrumb-item active" aria-current="page">Data</li> </ol> </nav>1
2
3
4
5
6
7
# 按钮组
将多个按钮组合成一组，在做分页器时可能会用到。
.btn-group- 在按钮组div标签中添加，表示使用按钮组样式。.btn-group-[sm|md|lg|xl|xxl]- 在按钮组div标签中添加，设定按钮组大小。.btn-group-vertical- 在按钮组div标签中添加，表示垂直方向使用按钮组样式。例子：
<!-- 普通按钮组 --> <div class="btn-group"> <button type="button" class="btn btn-danger">1</button> <button type="button" class="btn btn-warning">2</button> <button type="button" class="btn btn-success">3</button> </div> <!-- 单选按钮组 --> <div class="btn-group"> <input type="radio" class="btn-check" name="page" id="page-1" checked> <label class="btn btn-outline-primary" for="page-1">1</label> <input type="radio" class="btn-check" name="page" id="page-2"> <label class="btn btn-outline-primary" for="page-2">2</label> <input type="radio" class="btn-check" name="page" id="page-3"> <label class="btn btn-outline-primary" for="page-3">3</label> </div> <!-- 垂直方向按钮组 --> <div class="btn-group-vertical"> <button type="button" class="btn btn-danger">1</button> <button type="button" class="btn btn-warning">2</button> <button type="button" class="btn btn-success">3</button> </div>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
# 卡片组件
.card- 在卡片div标签中添加，表示使用卡片样式。.card-img-top- 在卡片div标签内的顶部添加，一般用在img标签，表示使用顶部图片样式。.card-img-bottom- 在卡片div标签内的底部添加，一般用在img标签，表示使用底部图片样式。.card-group- 在各个卡片div标签的外侧再添加一个卡片组div类，并使用该类即可，表示使用卡片组样式。.text-bg-[primary|secondary|success|...]- 在卡片div标签内的顶部添加，设置卡片背景颜色。卡片主体
.card-body- 在卡片div标签内的卡片主体div标签中添加，表示使用卡片body样式。.card-title- 在卡片主体div标签内的h*标题标签中添加，表示使用卡片标题样式。.card-subtitle- 在卡片主体div标签内的h*标题标签中添加，表示使用卡片副标题样式。.card-text- 在卡片主体div标签内的内容标签中添加，一般用在p标签，表示使用卡片文本样式。
页眉页脚
.card-header- 在卡片div标签内的顶部添加，一般用在div、h*标签，表示使用页眉样式，它是可选的，和图片一起用时要放到图片上面。.card-footer- 在卡片div标签内的底部添加，一般用在div、h*标签，表示使用页脚样式，它是可选的，和图片一起用时要放到图片下面。
卡片列表组
.list-group- 在卡片div标签内的列表组ol标签中添加，表示使用列表组样式。.list-group-flush- 在卡片div标签内的列表组ol标签中添加，表示删除一些边框和圆角以在卡片中适应。.list-group-item- 列表组ol标签内的列表项li标签中添加，表示使用列表组中项的样式。
卡片导航栏
.card-header-tabs- 在导航栏ul标签中添加，表示使用卡片导航栏表格样式。- 需要和
.nav、.nav-tabs一起使用。
- 需要和
.card-header-pills- 在导航栏ul标签中添加，表示使用卡片导航栏胶囊样式。- 需要和
.nav、.nav-pills一起使用。
- 需要和
网格卡片：
- 我们可以使用网格行列
.row-cols-*和.g-*类，来响应式的控制每行显示的卡片数量。
- 我们可以使用网格行列
例如：
<!-- 图文卡片 --> <div class="card mt-5 mx-auto w-25"> <img class="card-img-top" src="1.jpg"> <div class="card-body"> <p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil, alias.</p> </div> <img class="card-img-bottom" src="1.jpg"> </div> <!-- 标题、文本、链接卡片 --> <div class="card mt-5 mx-auto w-25"> <div class="card-body"> <h5 class="card-title">我是标题</h5> <h6 class="card-subtitle mb-2 text-muted">我是副标题</h6> <p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Impedit, explicabo.</p> <a href="#" class="card-link">链接一</a> <a href="#" class="card-link">链接二</a> </div> </div> <!-- 列表组卡片 --> <div class="card mt-5 mx-auto w-25"> <ul class="list-group list-group-flush"> <li class="list-group-item"> <img class="card-img-top" src="1.jpg"> </li> <li class="list-group-item"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae expedita, neque aliquam. </li> <li class="list-group-item"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae expedita, neque aliquam. </li> </ul> </div> <!-- 卡片内容靠右、卡片颜色为绿的卡片 --> <div class="card text-end text-bg-success mt-5 mx-auto w-25"> <div class="card-body"> <h5 class="card-title">我是标题</h5> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae expedita, neque aliquam.</p> <a href="#" class="btn btn-light">Go somewhere</a> </div> </div> <!-- 图片靠左、内容靠右的卡片，使用栅格系统实现 --> <div class="card text-end text-bg-primary mt-5 mx-auto w-25"> <div class="row g-0"> <div class="col-4"> <img class="img-fluid rounded-start h-100" src="1.jpg"> </div> <div class="col-8 card-body"> <h5 class="card-title">我是标题</h5> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae expedita.</p> </div> </div> </div> <!-- 卡片组 --> <div class="card-group w-50"> <div class="card mt-5 mx-auto w-25"> <div class="card-body"><p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil, alias.</p></div> </div> <div class="card mt-5 mx-auto w-25"> <div class="card-body"><p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil, alias.</p></div> </div> <div class="card mt-5 mx-auto w-25"> <div class="card-body"><p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil, alias.</p></div> </div> </div> <!-- 通过网格控制一行中最多展示的卡片数量 --> <div class="row row-cols-2 g-4 mt-5 mx-auto w-50"> <div class="col"> <div class="card"> <div class="card-body"> <p class="card-text">1 This is a longer card with supporting text below.</p> </div> </div> </div> <div class="col"> <div class="card"> <div class="card-body"> <p class="card-text">2 This is a longer card with supporting text below.</p> </div> </div> </div> <div class="col"> <div class="card"> <div class="card-body"> <p class="card-text">3 This is a longer card with supporting text below.</p> </div> </div> </div> <div class="col"> <div class="card"> <div class="card-body"> <p class="card-text">4 This is a longer card with supporting text below.</p> </div> </div> </div> </div> <!-- 导航栏卡片 --> <div class="card text-center mt-5 mx-auto w-25"> <div class="card-header"> <ul class="nav nav-pills card-header-pills"> <li class="nav-item"> <a class="nav-link active" aria-current="true" href="#">个人介绍</a> </li> <li class="nav-item"> <a class="nav-link" href="#">联系方式</a> </li> </ul> </div> <div class="card-body"> <p class="card-text">Hello, World!</p> </div> </div>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
# 旋转木马组件(轮播图)
轮播图div标签
.carousel- 在轮播图div标签中添加，表示使用轮播图样式。.slide- 在轮播图div标签中添加，表示轮播使用滑动效果。.carousel-fade- 在轮播图div标签中添加，表示轮播使用淡入淡出效果，需要和.slide一起使用。data-bs-ride="carousel"- 标签属性，在轮播图div标签中添加，加上后会开启自动轮播。data-bs-interval="2000"- 标签属性，在轮播图div标签中添加，设定自动轮播间隔，默认是每隔2秒进行一次轮播。- 可以在轮播图div标签中添加，此时会影响所有轮播项。也可以在轮播项标签添加，此时只会影响配置了的单个轮播项。
data-bs-theme="dark"- 标签属性，在轮播图div标签中添加，表示使用黑色主题。
轮播项
.carousel-inner- 在轮播图div标签内的轮播项组div标签添加，表示使用轮播项组样式。.carousel-item- 在轮播项组div标签内的轮播项div标签中添加，表示使用轮播项样式。.active- 在默认的轮播项div标签中添加，表示默认激活。.d-block和.w-100- 在轮播项div标签内的图片img标签中添加，表示展示图片并自适应缩放。.carousel-caption和.d-block- 在轮播项div标签内的标题div标签中添加，表示使用标题样式，其中可以放p、h*标签等。
轮播指示标记 (可选)
.carousel-indicators- 在轮播图标签内的轮播指示标记div标签中添加，表示使用指示标记样式。.active- 在默认的轮播指示标记div标签内的按钮标签中添加，表示默认激活。data-bs-target="#轮播图div标签的ID"- 标签属性，在指示标记按钮上添加，指定指示标记对应的轮播图对象。data-bs-slide-to="N"- 标签属性，在指示标记按钮上添加，表示绑定的轮播图序号。
轮播按钮
.carousel-control-prev- 在轮播图div标签内的轮播按钮标签中添加，表示滑到上一页轮播图。.carousel-control-next- 在轮播图div标签内的轮播按钮标签中添加，表示滑到下一页轮播图。data-bs-target="#轮播图div标签的ID"- 标签属性，在轮播按钮上添加，指定按钮对应的轮播图对象。data-bs-slide="prev"- 标签属性，在轮播上一页按钮上添加，表示点击按钮执行的动作是滑到上一页。data-bs-slide="next"- 标签属性，在轮播下一页按钮上添加，表示点击按钮执行的动作是滑到下一页。
例如：
<div id="test-box" class="carousel slide mt-5 mx-auto w-50" data-bs-ride="carousel" data-bs-interval="2000" data-bs-theme="dark"> <div class="carousel-indicators"> <button class="active" data-bs-target="#test-box" data-bs-slide-to="0"></button> <button class="" data-bs-target="#test-box" data-bs-slide-to="1"></button> <button class="" data-bs-target="#test-box" data-bs-slide-to="2"></button> </div> <div class="carousel-inner"> <div class="carousel-item active"> <img src="1.jpg" nt class="d-block w-100"> <div class="carousel-caption d-block"> <h4>第一张幻灯片标签</h4> <p>第一张幻灯片的一些代表性占位符内容。</p> </div> </div> <div class="carousel-item"> <img src="1.jpg" class="d-block w-100"> <div class="carousel-caption d-block"> <h4>第二张幻灯片标签</h4> <p>第一张幻灯片的一些代表性占位符内容。</p> </div> </div> <div class="carousel-item"> <img src="1.jpg" class="d-block w-100"> <div class="carousel-caption d-block"> <h4>第三张幻灯片标签</h4> <p>第一张幻灯片的一些代表性占位符内容。</p> </div> </div> </div> <button class="carousel-control-prev" data-bs-target="#test-box" data-bs-slide="prev"> <span class="carousel-control-prev-icon"></span> </button> <button class="carousel-control-next" data-bs-target="#test-box" data-bs-slide="next"> <span class="carousel-control-next-icon"></span> </button> </div>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
# 关闭按钮组件
关闭按钮组件一般用于关闭诸如模态框和警告框之类的窗口。
.btn-close- 在button按钮标签中添加，表示使用关闭按钮样式。.btn-close-white- 在button按钮标签中添加，表示使用浅色关闭按钮样式，需要和.btn-close一起使用。
# 下拉菜单组件
下拉菜单div标签
.dropdown- 在下拉菜单div标签中添加，表示使用下拉菜单样式。.dropup- 在下拉菜单div标签中添加，表示使用上拉菜单样式。.dropstart- 在下拉菜单div标签中添加，表示使用左拉菜单样式。.dropend- 在下拉菜单div标签中添加，表示使用右拉菜单样式。.dropdown-center- 在下拉菜单div标签中添加，表示使用下拉居中菜单样式。.dropup-center- 在下拉菜单div标签中添加，表示使用上拉居中菜单样式，需要和.dropup一起使用，不然图标还是下拉菜单的。
下拉按钮
.dropdown-toggle- 在下拉菜单div标签内的下拉按钮button标签中添加，表示使用下拉按钮样式。data-bs-toggle="dropdown"- 标签属性，在下拉按钮标签中添加，表示要切换的事件类型，此处为下拉菜单。
菜单标签
.dropdown-menu- 在下拉菜单div标签内的菜单ul标签中添加，表示使用下拉菜单样式。.dropdown-menu-dark- 在菜单ul标签中添加，表示使用深色的下拉菜单样式，需要和.dropdown-menu一起使用。.dropdown-menu-end- 在菜单ul标签中添加，表示菜单框靠右对齐。.dropdown-item- 在菜单ul标签内的菜单项li标签中添加，表示使用下拉菜单项样式。.dropdown-divider- 在菜单项li标签内的hr分隔线标签添加，表示使用菜单分隔线样式。.acitve- 在菜单ul标签内的菜单项li标签中添加，表示当前激活的菜单项。
例如：
<div class="dropdown text-center"> <button class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown">我是菜单</button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">我是菜单项一号</a></li> <li><a class="dropdown-item" href="#">我是菜单项二号</a></li> <li><a class="dropdown-item" href="#">我是菜单项三号</a></li> </ul> </div>1
2
3
4
5
6
7
8
# 列表组
列表组标签
.list-group- 在列表组div、ul、ol等标签中添加，表示使用列表组样式。.list-group-flush- 在列表组标签中添加，表示移除列表组默认的边框、圆角、背景颜色。
列表项标签
.list-group-item- 在列表组标签内的列表项div、li、a等标签中添加，表示使用列表项样式。.active- 在列表项标签中添加，表示使用激活的列表项样式。.list-group-item-action- 在有动作的列表项标签中添加，表示使用列表项动作样式，比如a标签。.list-group-numbered- 在列表项标签中添加，表示添加列表项序号样式。.list-group-item-[primary|secondary|success...]- 在列表项标签中添加，表示设定列表项颜色。.stretched-link- 在使用列表组做选择框时，在列表项内的label标签中添加，配置之后通过单击整个列表项来选择对应的选择框。
列表组作为选项卡切换内容
data-bs-toggle="list"- 标签属性，在列表项a标签中添加，表示要切换的事件类型，此处为列表组。.tab-content- 在列表内容div标签中添加，表示使用列表内容样式。.tab-pane- 在列表内容div标签内的内容项div标签中添加，表示使用内容标签面板样式。.fade- 在内容项div标签中添加，表示使用淡入淡出切换效果。.show和.active- 在默认的内容项div标签中添加，表示默认激活和展示。
例如：
<!-- 普通列表组 --> <ul class="list-group"> <li class="list-group-item">One Item</li> <li class="list-group-item">Two Item</li> <li class="list-group-item">Three Item</li> </ul> <!-- 超链接列表组 --> <div class="list-group"> <a href="#" class="list-group-item list-group-item-action active">One Link</a> <a href="#" class="list-group-item list-group-item-action">Two Link</a> <a href="#" class="list-group-item list-group-item-action">Three Link</a> </div> <!-- 带序号、标题、内容、徽章的列表组 --> <ol class="list-group list-group-numbered"> <li class="list-group-item d-flex justify-content-between align-items-start"> <div class="ms-2 me-auto"><b>标题1</b><br>内容1</div> <span class="badge bg-primary rounded-pill">14</span> </li> <li class="list-group-item d-flex justify-content-between align-items-start"> <div class="ms-2 me-auto"><b>标题2</b><br>内容2</div> <span class="badge bg-primary rounded-pill">99+</span> </li> </ol> <!-- 带标题、内容、日期的列表组 --> <div class="list-group"> <a href="#" class="list-group-item list-group-item-action active"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">标题1</h5><small>3 days ago</small> </div> <p class="mb-1">内容1</p> </a> <a href="#" class="list-group-item list-group-item-action"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">标题1</h5><small>3 days ago</small> </div> <p class="mb-1">内容1</p> </a> <a href="#" class="list-group-item list-group-item-action"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">标题1</h5><small>3 days ago</small> </div> <p class="mb-1">内容1</p> </a> </div> <!-- 复选列表组 --> <ul class="list-group"> <li class="list-group-item"> <input id="id-text-check-1" type="checkbox" class="form-check-input me-1"> <label for="id-text-check-1" class="form-check-label stretched-link">选项一</label> </li> <li class="list-group-item"> <input id="id-text-check-2" type="checkbox" class="form-check-input me-1"> <label for="id-text-check-2" class="form-check-label stretched-link">选项二</label> </li> <li class="list-group-item"> <input id="id-text-check-3" type="checkbox" class="form-check-input me-1"> <label for="id-text-check-3" class="form-check-label stretched-link">选项三</label> </li> </ul> <!-- 可切换的选项卡列表组 --> <div class="mt-5 mx-auto w-50"> <div class="row"> <div class="col-4"> <div class="list-group"> <a class="list-group-item list-group-item-action active" id="test-list-1" data-bs-toggle="list" href="#test-panel-1">列表项1</a> <a class="list-group-item list-group-item-action" id="test-list-2" data-bs-toggle="list" href="#test-panel-2">列表项2</a> <a class="list-group-item list-group-item-action" id="test-list-3" data-bs-toggle="list" href="#test-panel-3">列表项3</a> <a class="list-group-item list-group-item-action" id="test-list-3" data-bs-toggle="list" href="#test-panel-4">列表项4</a> </div> </div> <div class="col-8"> <div class="tab-content"> <div class="tab-pane fade show active" id="test-panel-1">内容一, Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, officiis.</div> <div class="tab-pane fade" id="test-panel-2">内容二, Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, officiis.</div> <div class="tab-pane fade" id="test-panel-3">内容三, Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, officiis.</div> <div class="tab-pane fade" id="test-panel-4">内容四, Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, officiis.</div> </div> </div> </div> </div>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
# 模态框
模态框实际就是单击某个按钮时会弹出的对话框，且在弹出的同时会在对话框和页面内容之间添加一层遮罩层，以突出对话框内容。
# 模态框弹出按钮
data-bs-toggle="modal"- 标签属性，在按钮标签中添加，表示要切换的事件类型，此处为模态框。data-bs-target="#模态框DIV标签ID"- 标签属性，在按钮标签中添加，表示要操作的模态框。例如：
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#模态框DIV标签ID">我是按钮</button>1
# 模态对话框
模态框
.modal- 模态框div标签中添加，表示使用模态样式。.fade- 模态框div标签中添加，表示使用模态框滑入滑出动画效果样式。tabindex="-1"- 标签属性，模态框div标签中添加，-1表示禁止通过tab键获取该标签焦点。data-bs-backdrop="static"- 标签属性，模态框div标签中添加，表示设定为静态背景，在用户点击模态框外部时不会关闭模态框。data-bs-keyboard="false"- 标签属性，模态框div标签中添加，表示禁用通过esc键关闭模态框。
对话框
.modal-dialog- 在模态框div标签内的对话框div标签中添加，表示使用模态对话框样式。.modal-dialog-scrollable- 在对话框div标签中添加，表示使用可滚动的模态框。.modal-dialog-centered- 在对话框div标签中添加，表示将模态框垂直居中显示。modal-[sm|md|lg|xl|xxl]- 在对话框div标签中添加，表示设置模态框大小。.modal-fullscreen- 在对话框div标签中添加，表示使用全屏模态框。.modal-fullscreen-[sm|md|lg|xl|xxl]-down- 在对话框div标签中添加，表示响应式使用全屏模态框。
对话框内容
.modal-content- 在对话框div标签内的内容div标签中添加，表示使用模态框内容样式。.modal-header- 在内容div标签内的页眉div标签中添加，表示使用模态框页眉样式。.modal-body- 在内容div标签内的页眉div标签中添加，表示使用模态框内容主体样式。.modal-footer- 在内容div标签内的页眉div标签中添加，表示使用模态框内容页脚样式。.modal-title- 在模态框内的标题h*标签中添加，表示使用模态框标题样式。data-bs-dismiss="modal"- 标签属性，在关闭按钮标签中添加，表示要关闭的对象类型，此处为模态框。
例如：
<div id="id-test-modal" class="modal fade" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false"> <div class="modal-dialog modal-dialog-scrollable"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title fs-5">我是标题</h1> <button class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, debitis eius odio totam, esse, rem commodi quam provident laboriosam nobis ab pariatur maxime voluptas sed quis sunt aspernatur ad! Dolorem! </div> <div class="modal-footer"> <button class="btn btn-secondary" data-bs-dismiss="modal">关闭</button> <button class="btn btn-primary">保存</button> </div> </div> </div> </div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 分页组件
分页组件用于指示一系列相关的内容存在于多个页面中的组件。
<nav></nav>- 分页组件应该包装在nav元素中，以将其标识为屏幕阅读器和其他辅助技术的导航部分。分页器标签
.pagination- 在分页器ul标签中添加，表示使用分页器样式。.pagination-[sm|md|lg|xl|xxl]- 在分页器ul标签中添加，设置分页器大小。.justify-content-center- 在分页器ul标签中添加，设置分页器居中对齐。.justify-content-end- 在分页器ul标签中添加，设置分页器靠右对齐。
分页项标签
.page-item- 在分页器ul标签内的分页项li标签中添加，表示使用分页项样式。.page-link- 在分页项li标签内的链接a标签中添加，表示使用分页项链接样式。.active- 在当前分页项li标签中添加，表示该页是当前页。«- 表示上一页的图标。»- 表示下一页的图标。
例如：
<nav> <ul class="pagination justify-content-center"> <li class="page-item"><a class="page-link" href="#"><span>«</span></a></li> <li class="page-item"><a class="page-link active" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#"><span>»</span></a></li> </ul> </nav>1
2
3
4
5
6
7
8
9
# 导航与选项卡
导航标签
.nav- 一般在导航ul标签中添加，表示使用导航样式，它同时也是一个弹性盒。.nav-tabs- 在导航标签中添加，表示使用选项卡样式。.nav-pills- 在导航标签中添加，表示使用胶囊样式。.nav-fill- 在导航标签中添加，表示将导航项宽度自动以等比拉长填充整行，各导航项宽度可能会不一致。.nav-justified- 在导航标签中添加，表示将导航项宽度自动以等宽拉长填充整行，各导航项宽度会保持一致。.flex-column- 在导航标签中添加，表示导航垂直展示。.justify-content-center- 在导航标签中添加，表示导航居中对齐。.justify-content-end- 在导航标签中添加，表示导航靠右对齐。
导航项标签
.nav-item- 一般在导航项li标签中添加，表示使用导航项样式。.nav-link- 一般在导航项li标签内的a标签中添加，表示使用导航链接样式。.active- 在当前所在导航项内的a标签中添加，表示使用激活状态导航项样式。
选项卡切换内容
data-bs-toggle="tab"- 标签属性，在选项a标签中添加，表示要切换的事件类型，此处为选项卡。.tab-content- 在选项内容div标签中添加，表示使用选项内容样式。.tab-pane- 在选项内容div标签内的内容项div标签中添加，表示使用内容标签面板样式。.fade- 在内容项div标签中添加，表示使用淡入淡出切换效果。.show和.active- 在默认的内容项div标签中添加，表示默认激活和展示。
例如：
<!-- ul标签方式使用导航 --> <ul class="nav"> <li class="nav-item"> <a class="nav-link active" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link disabled">Disabled</a> </li> </ul> <!-- nav标签方式使用导航，此时可以直接省略.nav-item类 --> <nav class="nav"> <a class="nav-link active" href="#">Home</a> <a class="nav-link" href="#">Features</a> <a class="nav-link" href="#">Pricing</a> <a class="nav-link disabled">Disabled</a> </nav> <!-- 选项卡切换内容 --> <div class="mt-5 mx-auto w-25"> <nav class="nav nav-pills"> <a class="nav-link active" data-bs-toggle="tab" href="#id-test-content-1">选项一</a> <a class="nav-link" data-bs-toggle="tab" href="#id-test-content-2">选项二</a> </nav> <div class="tab-content"> <div id="id-test-content-1" class="tab-pane fade show active">选项一内容 Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, temporibus.</div> <div id="id-test-content-2" class="tab-pane fade">选项二内容 Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, temporibus.</div> </div> </div>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
# 导航条
<!--
.navbar 表示使用导航条样式。
.navbar-expand-md 表示设定导航条多大展示导航栏项，隐藏折叠按钮。
.bg-light 表示使用亮色背景。
.sticky-top 顶部悬浮导航条，表示导航条粘在顶部，不会跳出文档流，在往下滑过导航条时才会悬浮在顶部，如果滑到导航条上面，则不会悬浮在顶部。
.sticky-bottom 底部悬浮导航条，表示导航条粘在低部，不会跳出文档流，在往上滑过导航条时才会悬浮在底部，如果滑到导航条下面，则不会悬浮在底部部。
.fixed-top 顶部固定导航条，表示导航条固定在顶部，会跳出文档流。
.fixed-bottom 底部固定导航条，表示导航条固定在低部，会跳出文档流。
-->
<div class="navbar navbar-expand-md sticky-top bg-light">
<!-- 此处主要用于添加导航栏内边距 -->
<div class="container-fluid">
<!-- 表示使用导航LOGO标签样式 -->
<a class="navbar-brand" href="">
<!-- 添加LOGO并对齐 -->
<img class="align-text-top" src="1.jpg" width="30" height="24">HTML
</a>
<!--
折叠按钮，用于展开折叠导航项。
一般会结合.navbar-expand-md使用，会在屏幕大时隐藏该按钮，同时自动展示导航栏项。会在屏幕小时显示该按钮，同时自动折叠导航栏项。
-->
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#id-navbar-content">
<span class="navbar-toggler-icon"></span>
</button>
<!-- 表示使用折叠框样式，使得折叠按钮切换后的布局更美观，要用它包裹住所有导航项内容标签 -->
<nav id="id-navbar-content" class="collapse navbar-collapse">
<!-- 导航项内容标签开始 -->
<!--
navbar-nav表示使用导航条导航样式
navbar-nav-scroll表示在展示折叠样式时，如果内容过高则添加滚动，默认滚动开始于75vh或视口高度的75%。
-->
<nav class="navbar-nav navbar-nav-scroll">
<a href="" class="nav-link active">主页</a>
<a href="" class="nav-link">介绍</a>
<a href="" class="nav-link">联系</a>
<a href="" class="nav-link">其他</a>
</nav>
<!-- 搜索框 -->
<form class="mx-auto">
<div class="input-group">
<input class="form-control" type="search">
<button class="btn btn-outline-success" type="submit"><i class="bi bi-search"></i></button>
</div>
</form>
<!--
.navbar-text使用和导航条主题一致的文本样式
.d-none .d-md-block 在md以下的屏幕大小中隐藏
-->
<span class="navbar-text d-none d-md-block">Jose</span>
<!-- 导航项内容标签结束 -->
</nav>
</div>
</div>
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
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
# 进度条
<!-- .progress表示使用进度条框样式 -->
<div class="progress mt-5 mx-auto w-25">
<!-- .progress-bar 表示使用进度样式，进度通过width宽度来控制 -->
<!-- .progress-bar-striped 表示使用条纹进度条样式 -->
<!-- .progress-bar-animated 表示使用条纹动画进度条样式，需要和progress-bar-striped一起使用才看得出效果 -->
<div id="id-progress-bar" class="progress-bar" style="width: 0%"></div>
</div>
<!-- 测试脚本 -->
<script>
var progress = document.getElementById("id-progress-bar");
var num = 0;
var timer = setInterval(function () {
num=num+0.1;
progress.style.width = num + "%";
if (num == 100) {
clearInterval(timer);
}
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 侧边栏
<!--
data-bs-toggle="offcanvas" 表示要切换的事件类型为侧边栏
data-bs-target="#侧边栏div标签ID" 表示要操作的侧边栏
-->
<button class="btn btn-primary d-block mt-5 mx-auto" data-bs-toggle="offcanvas" data-bs-target="#id-test-offcanvas">打开侧边栏</button>
<!-- .offcanvas 表示使用侧边栏样式 -->
<!-- .offcanvas-start 表示使用滑动展示效果和左侧边栏样式 -->
<!-- .offcanvas-end 表示使用滑动展示效果和右侧边栏样式 -->
<!-- .offcanvas-top 表示使用滑动展示效果和顶侧边栏样式 -->
<!-- .offcanvas-bottom 表示使用滑动展示效果和底侧边栏样式 -->
<!-- .show 表示默认展开侧边栏 -->
<!-- data-bs-scroll="true" 表示侧边栏展开时允许主页面滚动，默认是不允许的 -->
<!-- data-bs-backdrop="false" 表示侧边栏展开时关闭遮罩层 -->
<!-- data-bs-backdrop="static" 表示禁止通过单击侧边栏外部来关闭侧边栏 -->
<div id="id-test-offcanvas" class="offcanvas offcanvas-start show" data-bs-scroll="true">
<!-- .offcanvas-header 表示使用侧边栏头部样式 -->
<div class="offcanvas-header">
<!-- 侧边栏标题 -->
<h5 class="offcanvas-title">我是标题</h5>
<!-- data-bs-dismiss="offcanvas" 表示要关闭的对象是侧边栏 -->
<button class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<!-- .offcanvas-body 表示使用侧边栏主体样式 -->
<div class="offcanvas-body">
<!-- 这里如果要放导航条内容的话，只需要放导航栏标签中的导航项内容标签即可，例如下 -->
<nav class="navbar-nav navbar-nav-scroll">
<a href="" class="nav-link active">主页</a>
<a href="" class="nav-link">介绍</a>
<a href="" class="nav-link">联系</a>
<a href="" class="nav-link">其他</a>
</nav>
<form class="mx-auto">
<div class="input-group">
<input class="form-control" type="search">
<button class="btn btn-outline-success" type="submit"><i class="bi bi-search"></i></button>
</div>
</form>
</div>
</div>
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
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
# 占位栏
用于内容正在加载时使用占位栏作为占位。
例如：
<!-- 加载后的卡片，不需要用到占位栏 --> <div class="card mt-5 mx-auto w-25"> <img src="1.jpg" class="card-img-top w-100"> <div class="card-body"> <h5 class="card-title">Hello World!</h5> <p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt, perspiciatis.</p> <button class="btn btn-primary">GOTO</button> </div> </div> <!-- 加载中的卡片，可以用到占位栏 --> <div class="card mt-5 mx-auto w-25"> <img src="loging.jpg" class="card-img-top w-100"> <div class="card-body"> <!-- .placeholder-glow 用于使占位栏拥有闪烁动画 .placeholder-wave 用于使占位栏拥有波浪动画 --> <h5 class="card-title placeholder-glow"> <!-- .placeholder 表示使用占位栏样式 .placeholder-[sm|md|lg|xl|xxl] 表示设置占位栏大小 .col-[0~12] 表示设置占位栏宽度，也可以自己指定width宽度样式 .bg-[primary|success|danger|...] 表示设置占位栏颜色 --> <span class="placeholder col-6"> </h5> <p class="card-text placeholder-glow"> <span class="placeholder bg-primary col-7"></span> <span class="placeholder bg-success col-4"></span> <span class="placeholder bg-danger col-4"></span> <span class="placeholder bg-warning col-6"></span> <span class="placeholder bg-info col-8"></span> </p> <button class="btn btn-primary placeholder col-4" disabled></button> </div> </div>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
# 滚动监听组件
滚动监听组件可以用于实现监听滚动位置，修改导航位置的激活状态。
注意
- 滚动监听组件只能用在
nav或list group上。 <a>标签中必须用href指向标题元素的id。
- 滚动监听组件只能用在
例如：
<div class="card w-50 mx-auto mt-5"> <div class="card-header"> <!-- 需要指定id以使滚动监听能够找到选项栏标签 --> <div id="id-test-nav" class="nav nav-pills card-header-pills"> <!-- 需要指定href到对应的标题标签id，以便组件能够正常滚动监听 --> <a href="#id-title-1" class="nav-link active">选项一</a> <a href="#id-title-2" class="nav-link">选项二</a> <a href="#id-title-3" class="nav-link">选项三</a> </div> </div> <!-- data-bs-spy="scroll" 表示使用滚动监听 data-bs-smooth-scroll="true" 表示使用平滑滚动动画效果 data-bs-target="#选项栏标签id" 表示指定要操作的选项栏 --> <div class="card-body overflow-auto" style="height: 200px;" data-bs-spy="scroll" data-bs-smooth-scroll="true" data-bs-target="#id-test-nav"> <!-- 需要指定id以便组件能够正常滚动监听 --> <h4 id="id-title-1">标题一</h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis magni odio eligendi nisi similique sint perspiciatis iure nemo aliquam, ea aspernatur dolores nesciunt animi dignissimos vero consequatur quas architecto. Fugiat? Beatae, dolore accusantium? Non quia quod reiciendis possimus porro ipsa eos libero dolores ab! Amet animi nostrum exercitationem dolorum, officiis expedita nam reprehenderit temporibus molestias vitae corrupti? Hic, ex quas. Maiores, porro quae magni vel nihil excepturi natus! Voluptates enim eligendi iusto voluptatem saepe labore eveniet dignissimos adipisci, ea culpa. Labore iste incidunt beatae sint a distinctio nulla exercitationem expedita? Beatae quae mollitia animi dolor ea, cumque recusandae rerum unde, corporis molestias nostrum facere nobis quod maxime. Tempora laudantium mollitia quaerat consectetur. Facere culpa cupiditate eius animi nostrum atque voluptas. </p> <h4 id="id-title-2">标题二</h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis magni odio eligendi nisi similique sint perspiciatis iure nemo aliquam, ea aspernatur dolores nesciunt animi dignissimos vero consequatur quas architecto. Fugiat? Beatae, dolore accusantium? Non quia quod reiciendis possimus porro ipsa eos libero dolores ab! Amet animi nostrum exercitationem dolorum, officiis expedita nam reprehenderit temporibus molestias vitae corrupti? Hic, ex quas. Maiores, porro quae magni vel nihil excepturi natus! Voluptates enim eligendi iusto voluptatem saepe labore eveniet dignissimos adipisci, ea culpa. Labore iste incidunt beatae sint a distinctio nulla exercitationem expedita? Beatae quae mollitia animi dolor ea, cumque recusandae rerum unde, corporis molestias nostrum facere nobis quod maxime. Tempora laudantium mollitia quaerat consectetur. Facere culpa cupiditate eius animi nostrum atque voluptas. </p> <h4 id="id-title-3">标题三</h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis magni odio eligendi nisi similique sint perspiciatis iure nemo aliquam, ea aspernatur dolores nesciunt animi dignissimos vero consequatur quas architecto. Fugiat? Beatae, dolore accusantium? Non quia quod reiciendis possimus porro ipsa eos libero dolores ab! Amet animi nostrum exercitationem dolorum, officiis expedita nam reprehenderit temporibus molestias vitae corrupti? Hic, ex quas. Maiores, porro quae magni vel nihil excepturi natus! Voluptates enim eligendi iusto voluptatem saepe labore eveniet dignissimos adipisci, ea culpa. Labore iste incidunt beatae sint a distinctio nulla exercitationem expedita? Beatae quae mollitia animi dolor ea, cumque recusandae rerum unde, corporis molestias nostrum facere nobis quod maxime. Tempora laudantium mollitia quaerat consectetur. Facere culpa cupiditate eius animi nostrum atque voluptas. </p> </div> </div>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
# 旋转器
旋转器用于指示组件或页面的加载状态。
例如：
<!-- .spinner-border 表示使用边框旋转式旋转器样式 .spinner-grow 表示使用闪烁式旋转器样式 .spinner-[border|grow]-[sm|md|lg|xl|xxl] 表示设置旋转器大小 .text-[primary|success|danger|...] 表示设置旋转器颜色 --> <div class="spinner-border text-primary"></div> <div class="spinner-grow text-warning"></div> <button class="btn btn-primary" type="button" disabled> <span class="spinner-border spinner-border-sm"></span> Loading... </button>1
2
3
4
5
6
7
8
9
10
11
12
13
# 通知提醒组件
出于性能原因，通知组件是可选的，因此我们必须先自己添加JS代码初始化通知组件，然后才能使用通知提醒。
初始化通知JS例子
<script> // 获取触发器按钮标签 const toastTriggerEle = document.getElementById('id-toast-btn') // 获取通知标签 const toastEle = document.getElementById('id-test-toast') // 然后将打开通知标签的事件绑定到触发器按钮上 if (toastTriggerEle) { toastTriggerEle.addEventListener('click', () => { const toast = new bootstrap.Toast(toastEle) toast.show() }) } </script>1
2
3
4
5
6
7
8
9
10
11
12
13通知提醒使用例子
<button id="id-toast-btn" class="btn btn-primary d-block mt-5 mx-auto">Show live toast</button> <!-- .toast-container 表示使用通知提醒容器样式，一个通知容器中可以放多个通知 控制通知框位置 可以使用位置定位方式控制通知框位置，或者flex弹性盒也行 .position-fixed 表示使用固定定位 .bottom-0 .end-0 .p-3 表示通知放到底部靠右 .top-0 .start-50 .translate-middle-x 表示通知放到顶部中间 .top-0 .end-0 表示通知放到顶部靠右 .top-50 .start-50 .translate-middle 表示通知放到中部中间 .p-3 用于和页面边缘保持一定距离 --> <div class="toast-container top-0 start-50 translate-middle-x p-3"> <!-- .toast 表示使用通知提醒框样式 .show 表示默认显示通知 .text-bg-[primary|success|danger|...] 表示设置通知背景颜色 --> <div id="id-test-toast" class="toast"> <!-- .toast-header 表示使用通知标题样式，头部是可选的 --> <div class="toast-header"> <img src="1.jpg" class="rounded me-2" style="height: 20px; width: 20px;"> <b class="me-auto">Hello, world!</b> <!-- 注意：但如果没有头部，那么关闭标签一般会放到主体部分，保证通知可以被关闭掉 data-bs-dismiss="toast" 表示要关闭的类型是通知 data-bs-target="#要关闭的通知" 在.toast标签外设定按钮需要指定toast标签的ID，反之在其中设定按钮则不需要 --> <button type="button" class="btn-close" data-bs-dismiss="toast"></button> </div> <!-- .toast-body 表示使用通知主体样式 --> <div class="toast-body"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem sunt quibusdam nesciunt libero, laudantium recusandae impedit officiis maxime rem iure id dolore neque nihil at debitis velit fugiat assumenda. Delectus! <!-- 主体部分的按钮样例 --> <div class="mt-2 pt-2 border-top"> <button type="button" class="btn btn-primary btn-sm">Take action</button> <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button> </div> </div> </div> </div> <script> // 获取触发器按钮标签 const toastTriggerEle = document.getElementById('id-toast-btn') // 获取通知标签 const toastEle = document.getElementById('id-test-toast') // 然后将打开通知标签的事件绑定到触发器按钮上 if (toastTriggerEle) { toastTriggerEle.addEventListener('click', () => { const toast = new bootstrap.Toast(toastEle) toast.show() }) } </script>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
# 标题提示框和提示框区别
标题提示框(Tooltips)和提示框(Popover)在外观上差不多，但是使用场景上有所区别。
- Tooltip
- Tooltip只能承载简单的文本，并且一般不会多于50个字，只能对当前的内容进行简单解释。比如一些问号、叹号图标，当我们放到上面使就会展示Tooltip对标题进行解释。
- 用来帮助用户了解到某些图标的含义目的、展示截断的文本等。
- Popover
- Popover能承载更多的文本、按钮、链接、图片、视频等等，且由于它承载的内容较多，所以不太适合通过hover进行内容呈现，而是通过按钮点击之类的方式。
- 可以用于警告用户的一种提示信息，需要用户再次确认，它相比Dialog更为轻量。
- 或者作为新手引导，让用户进行一步步的确认，它的轻量刚好能够适合进行新手引导。
# Popovers提示框
注意
- 出于性能原因，提示框是可选的，因此我们必须先自己添加JS代码初始化提示框，然后才能使用提示框。
- 该提示框组件依赖于popover插件，而
bootstrap.bundle.min.js文件中包含了popover相关代码。但如果使用的是bootstrap.min.js文件，则需要额外导入一个popover插件。 data-bs-title和data-bs-content标签属性，如果用到了但是值为空的话，则无法正常显示提示框。
初始化提示框
代码要在导入
bootstrap.bundle.min.js后再进行定义。没有使用defer属性导入
bootstrap.bundle.min.js文件的初始化方式：... ... <body> ... ... <script src="./apps/static/js/vendor/bootstrap.bundle.min.js"></script> <script> // 弹出框初始化代码 const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]'); const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl)); </script> </body>1
2
3
4
5
6
7
8
9
10使用了defer属性导入
bootstrap.bundle.min.js文件的初始化方式：<!-- 因为defer仍会确保script标签的有序执行，所以我们只需要将弹出框初始化代码放到一个新脚本文件，然后再在bootstrap.bundle.min.js下方以defer方式导入它即可 --> <head> ... ... <script src="./apps/static/js/vendor/bootstrap.bundle.min.js" defer></script> <script src="./apps/static/js/vendor/bootstrap.popovers.js" defer></script> </head> ... ...1
2
3
4
5
6
7
弹出框标签使用例子
<!-- data-bs-toggle="popover" 表示要切换的事件类型为popover提示框 data-bs-title="提示标题" 表示要提示的标题，可选，但如果定义了就不能为空 data-bs-content="提示内容" 表示要提示的内容，如果定义了就不能为空 data-bs-placement="top|right|bottom|left" 表示设置弹出框的弹出方向 data-bs-trigger="focus" 表示在弹出框弹出后，可以通过单击弹出框按钮外部来关闭弹出框 data-bs-trigger="hover" 表示当鼠标悬浮于标签上时展示弹出框，移开时关闭弹出框 data-bs-trigger="hover focus" 表示同时拥有focus和hover两种触发方式，但一般不会一起用 --> <button class="btn btn-primary d-block mt-5 mx-auto" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-placement="bottom" data-bs-content="我是弹出框内容">我是弹出框</button>1
2
3
4
5
6
7
8
9
10
# Tooltips提示框
注意
- 出于性能原因，提示框是可选的，因此我们必须先自己添加JS代码初始化提示框，然后才能使用提示框。
- 该提示框组件依赖于popover插件，而
bootstrap.bundle.min.js文件中包含了popover相关代码。但如果使用的是bootstrap.min.js文件，则需要额外导入一个popover插件。 data-bs-title标签属性，如果用到了但是值为空的话，则无法正常显示提示框。
初始化提示框
代码要在导入
bootstrap.bundle.min.js后再进行定义。没有使用defer属性导入
bootstrap.bundle.min.js文件的初始化方式：... ... <body> ... ... <script src="./apps/static/js/vendor/bootstrap.bundle.min.js"></script> <script> // 弹出框初始化代码 const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]') const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl)) </script> </body>1
2
3
4
5
6
7
8
9
10使用了defer属性导入
bootstrap.bundle.min.js文件的初始化方式：<!-- 因为defer仍会确保script标签的有序执行，所以我们只需要将弹出框初始化代码放到一个新脚本文件，然后再在bootstrap.bundle.min.js下方以defer方式导入它即可 --> <head> ... ... <script src="./apps/static/js/vendor/bootstrap.bundle.min.js" defer></script> <script src="./apps/static/js/vendor/bootstrap.tooltips.js" defer></script> </head> ... ...1
2
3
4
5
6
7
弹出框标签使用例子
<!-- 自定义tooltip提示框颜色类，来控制tooltip的CSS颜色变量 --> <style>.tooltip-primary {--bs-tooltip-bg: var(--bs-primary);}</style> <div class="position-fixed start-50 top-50"> <!-- data-bs-toggle="tooltip" 表示要切换的事件类型为tooltip提示框 data-bs-title="提示标题" 表示要提示的标题，如果定义了就不能为空 data-bs-placement="top|right|bottom|left" 表示设置弹出框的弹出方向 data-bs-custom-class="自定义tooltip类名" 表示使用自定义的tooltip类 --> <i class="bi bi-file-earmark" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="我是文件" data-bs-custom-class="tooltip-primary"> </i> </div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17