Bootstrap 5-文本颜色

最新推荐文章于 2024-05-07 10:17:44 发布

Jealous_-

最新推荐文章于 2024-05-07 10:17:44 发布

阅读量158

点赞数 1

分类专栏： Bootstrap 5 文章标签： bootstrap

本文链接：https://blog.csdn.net/m0_73839298/article/details/138521759

版权

Bootstrap 5 专栏收录该内容

55 篇文章 0 订阅

订阅专栏

text-*

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link href="https://www.w3school.com.cn/lib/bs/bootstrap.css" rel="stylesheet">
    <!-- 引入 bootstrap.css -->
    <script src="https://www.w3school.com.cn/lib/bs/bootstrap.js"></script>
    <!-- 引入 bootstrap.js -->
    <style>
        p {
            text-align: center;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div class="container">

        <p class="text-muted">灰色:text-muted</p>

        <p class="text-primary">蓝色:text-primary</p>

        <p class="text-success">绿色:text-success</p>

        <p class="text-info">天蓝色:text-info</p>

        <p class="text-warning">黄色:text-warning</p>

        <p class="text-danger">红色:text-danger</p>

        <p class="text-secondary">次灰色:text-secondary</p>

        <p class="text-dark">次黑色:text-dark</p>

        <p class="text-body">黑色:text-body</p>

        <p class="text-light">次白色:text-light</p>

        <p class="text-white">白色:text-white</p>

    </div>
</body>

</html>
<!-- 
    文本颜色:text-*

    text-muted：灰色           ——>此文本已静音
    text-primary：蓝色         ——>此文字很重要
    text-success：绿色         ——>此文本表示成功
    text-info：天蓝色          ——>此文字代表了一些信息
    text-warning：黄色         ——>此文本表示警告
    text-danger：红色          ——>此文字代表危险
    text-secondary：次灰色     ——>次要文本
    text-white：白色          
    text-dark：次黑色          
    text-body：黑色            ——>默认主体颜色（通常为黑色）
    text-light：次白色         
-->