bootstrap5

容器

1. .container类：用于固定宽度并支持响应式布局的容器
2. .container-fluid类：用于百分百宽度，占据全部视口的容器

容器内边距

1. .pt-5：填充顶部内边距

网格系统

1. .col- 针对所有设备；
2. .col-sm- 平板 - 屏幕宽度等于或大于 576px；
3. .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px；
4. .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px；
5. .col-xl- 特大桌面显示器 - 屏幕宽度等于或大于 1200px；
6. .col-xxl- 超大桌面显示器 - 屏幕宽度等于或大于 1400px；
   每一层类都会向上扩展，这意味如果计划为md、lg和xl设置相同的宽度，则只需指定md。

文字排版

1. <h1> - <h6>
2. .display-1,.display-2,.display-3,.display-4
3. <small>/.small：用于创建字号更小的颜色更浅的文本（为父元素的85%）
4. <mark>/.marked：为黄色背景及有一定的内边距
5. <abbr>：显示在文本底部的一条虚线边框
6. <blockquote>/.blockquote：引用的内容
7. <dl>
8. <kbd>：键盘样式
9. <pre>：固定文本段落样式
10. .lead：让段落更突出
11. .text-left：左对齐
12. .text-center：居中
13. .text-right：右对齐
14. .text-justify：设定文本对齐，段落中超出屏幕部分文字自动换行
15. .text-nowrap：段落中超出屏幕部分不换行

表格

1. .table：设置基础表格的样式
2. .table-striped：将在内的行上看到条纹
3. .table-bordered：可以为表格添加边框
4. .table-hover：为表格的每一行添加鼠标悬停效果（灰色背景）
5. .table-dark：为表格添加黑色背景
6. .table-boederless：设置一个无边框的表格

图像形状

1. .rounded：让图片显示圆角效果
2. .rounded-circle：设置椭圆形图片
3. .img-thumbnail：设置图片缩略图（图片有边框）
4. .float-start：设置图片左对齐
5. .float-end：设置图片右对齐
6. .mx-auto(margin:auto)和.d-block(display:block)：设置图片居中对齐
7. .img-fluid（max-width:100%,height:auto)：设置响应式图片

信息提示框

1. .alter：<div class="alert alert-success">信息提示框
2. .alter-link：设置匹配提示框颜色的链接
3. .alter-dismissible：关闭提示框
4. .fade：设置提示框在关闭时的淡出效果
5. .show：设置提示框在关闭时的淡入效果