80 lines
3.0 KiB
Markdown
80 lines
3.0 KiB
Markdown
## 元素颜色
|
||
|
||
| 颜色代码 | 说明 |
|
||
|-----------|-----|
|
||
| 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>
|
||
``` |