3.0 KiB
元素颜色
| 颜色代码 | 说明 |
|---|---|
| primary | 蓝色 |
| secondary | 灰色 |
| success | 绿色 |
| danger | 红色 |
| warning | 黄色 |
| info | 浅蓝色 |
| light | 白色 |
| dark | 黑色 |
表格添加颜色
| 颜色代码 | 说明 |
|---|---|
| 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 用于设置大号字体。
<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>