BootStrap4工具类之文字颜色

最新推荐文章于 2024-04-11 14:32:47 发布

爱喝水的qdy

最新推荐文章于 2024-04-11 14:32:47 发布

阅读量2.5k

点赞数

分类专栏： BootStrap4 文章标签： bootstrap4 文字颜色工具类

本文链接：https://blog.csdn.net/qq_32617703/article/details/103322800

版权

BootStrap4 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

官方文档地址

https://getbootstrap.com/docs/4.4/utilities/colors/

其余文档地址

菜鸟教程
- https://www.runoob.com/bootstrap4/bootstrap4-colors.html
bs4.vx.link
- http://bs4.vx.link/pages/utilities.html

文本颜色

.text-muted
.text-primary
.text-secondary
.text-success
.text-info
.text-warning
.text-danger
.text-body
.text-dark
.text-light
.text-white
- .text-white-50 后面的数字表示的是透明度
.text-black-50

<div class="container">
    <h2>代表指定意义的文本颜色</h2>
    <p class="text-muted">柔和的文本。</p>
    <p class="text-primary">重要的文本。</p>
    <p class="text-secondary">副标题。</p>
    <p class="text-success">执行成功的文本。</p>
    <p class="text-info">代表一些提示信息的文本。</p>
    <p class="text-warning">警告文本。</p>
    <p class="text-danger">危险操作文本。</p>
    <p class="text-body">body。</p>
    <p class="text-dark">深灰色文字。</p>
    <p class="text-light">浅灰色文本（白色背景上看不清楚）。</p>
    <p class="text-white">白色文本（白色背景上看不清楚）。</p>
    <p class="text-white-50">透明度为0.5的白色文本（白色背景上看不清楚）。</p>
    <p class="text-black-50">透明度为0.9的黑色文本</p>
</div>

链接文本颜色

上下文文本也提供 hover 和 focus 状态，但对于 .text-white and .text-muted 类没有链接样式。

<div class="container">
    <h2>文本颜色</h2>
    <p>鼠标移动到链接。</p>
    <p>
        上下文文本也提供 hover 和 focus 状态，
        对于链接类型也同时能顺利运行注意 .text-white and .text-muted 类没有链接样式。
    </p>
    <a href="#" class="text-muted">柔和的链接。</a>
    <a href="#" class="text-primary">主要链接。</a>
    <a href="#" class="text-secondary">副标题链接。</a>
    <a href="#" class="text-success">成功链接。</a>
    <a href="#" class="text-info">信息文本链接。</a>
    <a href="#" class="text-warning">警告链接。</a>
    <a href="#" class="text-danger">危险链接。</a>
    <a href="#" class="text-body">body链接。</a>
    <a href="#" class="text-dark">深灰色链接。</a>
    <a href="#" class="text-light">浅灰色链接。</a>
    <a href="#" class="text-white">白色链接。</a>
</div>

背景颜色

.bg-primary
.bg-secondary
.bg-success
.bg-info
.bg-warning
.bg-danger
.bg-dark
.bg-light
.bg-white
.bg-transparent

<div class="container">
    <h2>背景颜色</h2>
    <p class="bg-primary text-white">重要的背景颜色。</p>
    <p class="bg-secondary text-white">副标题背景颜色。</p>
    <p class="bg-success text-white">执行成功背景颜色。</p>
    <p class="bg-info text-white">信息提示背景颜色。</p>
    <p class="bg-warning text-white">警告背景颜色</p>
    <p class="bg-danger text-white">危险背景颜色。</p>
    <p class="bg-dark text-white">深灰背景颜色。</p>
    <p class="bg-light text-dark">浅灰背景颜色。</p>
    <p class="bg-white text-dark">白色背景颜色。</p>
    <p class="bg-transparent text-dark">透明背景颜色。</p>
</div>

背景渐变

当 $enable-gradients 设置为true时，你将可以使用.bg-gradient-* 的工具。

默认情况下， $enable-gradients 是停用的，下面的例子是故意显示错误的。

这是为了在你开始使用 Bootstrap 时更容易进行自定义。需要在 Sass 中启用这些 Class

<div class="container">
    <h2>背景渐变</h2>
    <pre class="pre-scrollable">
        当 $enable-gradients 设置为true时，你将可以使用 .bg-gradient- 的工具。
        默认情况下， By default, $enable-gradients 是停用的，下面的例子是故意显示错误的。
        这是为了在你开始使用 Bootstrap 时更容易进行自定义。了解我们的 Sass 选项启用这些 Class 和更多。
    </pre>
    <div class="p-3 mb-2 bg-gradient-primary text-white">.bg-gradient-primary</div>
    <div class="p-3 mb-2 bg-gradient-secondary text-white">.bg-gradient-secondary</div>
    <div class="p-3 mb-2 bg-gradient-success text-white">.bg-gradient-success</div>
    <div class="p-3 mb-2 bg-gradient-info text-white">.bg-gradient-info</div>
    <div class="p-3 mb-2 bg-gradient-warning text-dark">.bg-gradient-warning</div>
    <div class="p-3 mb-2 bg-gradient-danger text-white">.bg-gradient-danger</div>
    <div class="p-3 mb-2 bg-gradient-dark text-white">.bg-gradient-dark</div>
    <div class="p-3 mb-2 bg-gradient-light text-dark">.bg-gradient-light</div>
</div>

整体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no"/>
    <title>06颜色</title>
    <!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->

    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>

<div class="container">
    <h2>代表指定意义的文本颜色</h2>
    <p class="text-muted">柔和的文本。</p>
    <p class="text-primary">重要的文本。</p>
    <p class="text-secondary">副标题。</p>
    <p class="text-success">执行成功的文本。</p>
    <p class="text-info">代表一些提示信息的文本。</p>
    <p class="text-warning">警告文本。</p>
    <p class="text-danger">危险操作文本。</p>
    <p class="text-body">body。</p>
    <p class="text-dark">深灰色文字。</p>
    <p class="text-light">浅灰色文本（白色背景上看不清楚）。</p>
    <p class="text-white">白色文本（白色背景上看不清楚）。</p>
    <p class="text-white-50">透明度为0.5的白色文本（白色背景上看不清楚）。</p>
    <p class="text-black-50">透明度为0.9的黑色文本</p>
</div>

<div class="container">
    <h2>文本颜色</h2>
    <p>鼠标移动到链接。</p>
    <p>
        上下文文本也提供 hover 和 focus 状态，
        对于链接类型也同时能顺利运行注意 .text-white and .text-muted 类没有链接样式。
    </p>
    <a href="#" class="text-muted">柔和的链接。</a>
    <a href="#" class="text-primary">主要链接。</a>
    <a href="#" class="text-secondary">副标题链接。</a>
    <a href="#" class="text-success">成功链接。</a>
    <a href="#" class="text-info">信息文本链接。</a>
    <a href="#" class="text-warning">警告链接。</a>
    <a href="#" class="text-danger">危险链接。</a>
    <a href="#" class="text-body">body链接。</a>
    <a href="#" class="text-dark">深灰色链接。</a>
    <a href="#" class="text-light">浅灰色链接。</a>
    <a href="#" class="text-white">白色链接。</a>
</div>

<div class="container">
    <h2>背景颜色</h2>
    <p class="bg-primary text-white">重要的背景颜色。</p>
    <p class="bg-secondary text-white">副标题背景颜色。</p>
    <p class="bg-success text-white">执行成功背景颜色。</p>
    <p class="bg-info text-white">信息提示背景颜色。</p>
    <p class="bg-warning text-white">警告背景颜色</p>
    <p class="bg-danger text-white">危险背景颜色。</p>
    <p class="bg-dark text-white">深灰背景颜色。</p>
    <p class="bg-light text-dark">浅灰背景颜色。</p>
    <p class="bg-white text-dark">白色背景颜色。</p>
    <p class="bg-transparent text-dark">透明背景颜色。</p>
</div>

<div class="container">
    <h2>背景渐变</h2>
    <pre class="pre-scrollable">
        当 $enable-gradients 设置为true时，你将可以使用 .bg-gradient- 的工具。
        默认情况下， By default, $enable-gradients 是停用的，下面的例子是故意显示错误的。
        这是为了在你开始使用 Bootstrap 时更容易进行自定义。了解我们的 Sass 选项启用这些 Class 和更多。
    </pre>
    <div class="p-3 mb-2 bg-gradient-primary text-white">.bg-gradient-primary</div>
    <div class="p-3 mb-2 bg-gradient-secondary text-white">.bg-gradient-secondary</div>
    <div class="p-3 mb-2 bg-gradient-success text-white">.bg-gradient-success</div>
    <div class="p-3 mb-2 bg-gradient-info text-white">.bg-gradient-info</div>
    <div class="p-3 mb-2 bg-gradient-warning text-dark">.bg-gradient-warning</div>
    <div class="p-3 mb-2 bg-gradient-danger text-white">.bg-gradient-danger</div>
    <div class="p-3 mb-2 bg-gradient-dark text-white">.bg-gradient-dark</div>
    <div class="p-3 mb-2 bg-gradient-light text-dark">.bg-gradient-light</div>
</div>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>