## 元素颜色

| 颜色代码      | 说明  |
|-----------|-----|
| primary   | 蓝色  |
| secondary | 灰色  |
| success   | 绿色  |
| danger    | 红色  |
| warning   | 黄色  |
| info      | 浅蓝色 |
| light     | 白色  |
| dark      | 黑色  |

## 表格添加颜色

<!-- On cells (`tr` or `td`) -->
| 颜色代码            | 说明    |
|-----------------|-------|
| table-active    | 选中的浅灰 |
| table-primary   ||
| table-secondary ||
| table-success   ||
| table-danger    ||
| table-warning   ||
| table-info      ||
| table-light     ||
| table-dark      ||


## 元素之间添加间隔

| 间隔代码                     | 说明     |
|--------------------------|--------|
| mb-*（margin-bottom）      | 内部下边距  |
| mt-*（margin-top）         | 内部上边距  |
| ml-*（margin-left）        | 内部左边距  |
| mr-*（margin-right）       | 内部右边距  |
| px-*（padding-horizontal） | 外部水平边距 |
| py-*（padding-vertical）   | 外部垂直边距 |

## 元素位置

`ml-auto` 和 `mr-auto`： 分别用于使元素在左侧和右侧具有自动外边距，从而在容器中实现水平居左或居右。

`mx-auto`： 用于使元素在水平方向上具有自动外边距，从而实现水平居中对齐。

`my-auto`： 用于使元素在垂直方向上具有自动外边距，从而实现垂直居中对齐。

`text-center`： 用于文本元素，使文本水平居中对齐。

`text-left` 和 `text-right`： 用于文本元素，分别用于使文本左对齐或右对齐。

justify-content-start、justify-content-center 和 justify-content-end： 用于 Flexbox 布局中的容器，分别用于在水平方向上使内容开始、居中或结束对齐。

align-items-start、align-items-center 和 align-items-end： 用于 Flexbox 布局中的容器，分别用于在垂直方向上使内容顶部、居中或底部对齐。

align-self-start、align-self-center 和 align-self-end： 用于 Flexbox 布局中的项目，分别用于在垂直方向上使单个项目的内容顶部、居中或底部对齐。

## 字体大小

`.display-1` 到 `.display-4`：这些类用于设置显示文本的不同字体大小，其中 `.display-1` 是最大的，`.display-4` 是最小的。

`.h1` 到 `.h6`：这些类用于设置标题的字体大小，其中 `.h1` 是最大的，`.h6`是最小的。

`.lead`：这个类用于设置段落或文本的字体大小，使其稍微大一些，适合用作引导文本。

`.small`：这个类用于设置文本的较小字体大小。

`.text-[size]`：这是一个自定义类，你可以用具体的字体大小名称替换 `[size]`。例如，`.text-sm` 用于设置小号字体，`.text-lg` 用于设置大号字体。

```html
<p class="display-1">这是display-1文本</p>
<p class="display-2">这是display-2文本</p>
<p class="display-3">这是display-3文本</p>
<p class="display-4">这是display-4文本</p>
<h1 class="h1">这是标题</h1>
<p class="lead">这是引导文本</p>
<p class="small">这是small号文本</p>
<p class="text-lg">这是lg号文本</p>
```