扫码一下
查看教程更方便
教程 > bootstrap 5 教程 >
阅读：499
bootstrap5 帮助/实用程序类——迹忆客-ag捕鱼王app官网
颜色类
我们可以使用上下文颜色类来强调文本并通过不同颜色传达不同含义。下面是可用上下文颜色类的完整列表。
| 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。 |
