扫码一下
查看教程更方便
教程 > Bootstrap 5 教程 > Bootstrap 5 基础
阅读：489
Bootstrap5 帮助/实用程序类
颜色类
我们可以使用上下文颜色类来强调文本并通过不同颜色传达不同含义。下面是可用上下文颜色类的完整列表。
| Class | 描述 | 运行 |
|---|---|---|
| .text-primary | 蓝色文本 (#007bff)。 | 尝试一下 |
| .text-secondary | 灰色文本 (#6c757d)。 | 尝试一下 |
| .text-success | 绿色文本 (#28a745)。 | 尝试一下 |
| .text-danger | 红色文本 (#dc3545)。 | 尝试一下 |
| .text-warning | 黄色文本 (#ffc107)。 | 尝试一下 |
| .text-info | 青色文本 (#17a2b8)。 | 尝试一下 |
| .text-light | 浅灰色文本 (#f8f9fa)。 | 尝试一下 |
| .text-dark | 深灰色文本 (#343a40)。 | 尝试一下 |
| .text-body | Bootstrap默认正文颜色 (#212529)。 | 尝试一下 |
| .text-muted | 浅灰色文本 (#6c757d)。 | 尝试一下 |
| .text-white | 白色文本 (#fff)。 | 尝试一下 |
| .text-black-50 | 黑色文本设置50%透明度 (rgba(0,0,0,.5))。 | 尝试一下 |
| .text-white-50 | 白色文本设置50%透明度 (rgba(255,255,255,.5))。 | 尝试一下 |
背景色
与文本颜色类类似，我们可以使用背景颜色类来设置元素的背景颜色。
| Class | 描述 | 运行 |
|---|---|---|
| .bg-primary | 蓝色背景(#007bff#007bff) | 尝试一下 |
| .bg-secondary | 灰色背景 (#6c757d) | 尝试一下 |
| .bg-success | 绿色背景 (#28a745) | 尝试一下 |
| .bg-danger | 红色背景 (#dc3545) | 尝试一下 |
| .bg-warning | 黄色背景 (#ffc107) | 尝试一下 |
| .bg-info | 青色背景 (#17a2b8) | 尝试一下 |
| .bg-light | 浅灰色背景 (#f8f9fa) | 尝试一下 |
| .bg-dark | 深灰色背景 (#343a40) | 尝试一下 |
| .bg-white | 白色背景 (#fff) | 尝试一下 |
| .bg-transparent | 透明背景 (transparent) | 尝试一下 |
文本对齐类
我们可以使用这些文本对齐类来对齐和格式化文本内容。
| Class | 描述 | 运行 |
|---|---|---|
| .text-start | 文本左对齐。 | 尝试一下 |
| .text-center | 文本居中对齐。 | 尝试一下 |
| .text-end | 文本右对齐。 | 尝试一下 |
| .text-wrap | 隐藏溢出的文本 | 尝试一下 |
| .text-nowrap | 防止文本换行 | 尝试一下 |
| .text-truncate | 使用省略号截断文本。 | 尝试一下 |
| .text-break | 将长文本截断，防止溢出。 | 尝试一下 |
| .text-lowercase | 将文本转换为小写 | 尝试一下 |
| .text-uppercase | 将文本转换为大写 | 尝试一下 |
| .text-capitalize | 将每个单词的第一个字母转换成大写。 | 尝试一下 |
| .fw-bold | 将元素的字体设置为粗体 | 尝试一下 |
| .fw-bolder | 将元素的字体粗细设置为更粗（相对于父元素）。 | 尝试一下 |
| .fw-normal | 将元素的字体设置为正常。 | 尝试一下 |
| .fw-light | 将元素的字体设置为细体。 | 尝试一下 |
| .fw-lighter | 将元素的字体粗细设置为更细（相对于父元素）。 | 尝试一下 |
| .fst-italic | 将元素的字体样式设置为斜体。 | 尝试一下 |
| .fst-normal | 将元素的字体样式设置为正常。 | 尝试一下 |
| .font-monospace | 将元素的字体设置为monospace。 | 尝试一下 |
| .text-reset | 重置文本或链接的颜色（从其父级继承颜色）。 | 尝试一下 |
| .text-decoration-none | 从文本中删除文本修饰，例如下划线。 | 尝试一下 |
| .text-decoration-underline | 给文本添加下划线。 | 尝试一下 |
| .text-decoration-line-through | 在文本中间添加一行。 | 尝试一下 |
边框类
我们可以使用边框实用程序类来快速设置元素的边框和边框半径的样式。 它们对于图像、按钮或任何其他元素非常有用。
| Class | 描述 | 运行 |
|---|---|---|
| .border | 在元素的所有边添加边框。 | 尝试一下 |
| .border-top | 在元素的顶部添加边框。 | 尝试一下 |
| .border-end | 在元素的右侧添加边框。 | 尝试一下 |
| .border-bottom | 在元素的底部添加边框。 | 尝试一下 |
| .border-start | 在元素的左侧添加边框。 | 尝试一下 |
| .border-0 | 移除元素所有边的边框。 | 尝试一下 |
| .border-top-0 | 从元素的顶部移除边框。 | 尝试一下 |
| .border-end-0 | 移除元素右侧的边框。 | 尝试一下 |
| .border-bottom-0 | 移除元素底部的边框。 | 尝试一下 |
| .border-start-0 | 移除元素左侧的边框。 | 尝试一下 |
| .border-primary | 将元素的边框颜色更改为蓝色(#007bff). | 尝试一下 |
| .border-secondary | 将元素的边框颜色更改为灰色(#6c757d). | 尝试一下 |
| .border-success | 将元素的边框颜色更改为绿色 (#28a745). | 尝试一下 |
| .border-danger | 将元素的边框颜色更改为红色 (#dc3545). | 尝试一下 |
| .border-warning | 将元素的边框颜色更改为黄色 (#ffc107). | 尝试一下 |
| .border-info | 将元素的边框颜色更改为蓝绿色 (#17a2b8). | 尝试一下 |
| .border-light | 将元素的边框颜色更改为非常浅的灰色 (#f8f9fa). | 尝试一下 |
| .border-dark | 将元素的边框颜色更改为深灰色 (#343a40). | 尝试一下 |
| .border-white | 将元素的边框颜色更改为白色 (#fff). | 尝试一下 |
| .rounded | 环绕元素的所有角。 | 尝试一下 |
| .rounded-top | 圆形元素的左上角和右上角。 | 尝试一下 |
| .rounded-end | 圆形元素的右上角和右下角。 | 尝试一下 |
| .rounded-bottom | 圆形元素的左下角和右下角。 | 尝试一下 |
| .rounded-start | 圆形元素的左上角和左下角。 | 尝试一下 |
| .rounded-circle | 将元素处理成圆形。 | 尝试一下 |
| .rounded-pill | 将元素处理成药丸形状。 | 尝试一下 |
| .rounded-0 | 从元素中删除圆角。 | 尝试一下 |
| .rounded-1 | 将元素的边界半径设置为 0.2rem。 | 尝试一下 |
| .rounded-2 | 将元素的边界半径设置为 0.25rem。 | 尝试一下 |
| .rounded-3 | 将元素的边界半径设置为 0.3rem。 | 尝试一下 |
