教程 > Bootstrap 4 教程 > Bootstrap 4 基础 阅读：85

Bootstrap4 帮助/实用程序类

颜色类

我们可以使用上下文颜色类来强调文本并通过不同颜色传达不同含义。下面是可用上下文颜色类的完整列表。

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 在文本中间添加一行。 尝试一下

查看笔记

扫码一下
查看教程更方便