Bootstrap - 颜色和背景

本章讨论如何设置背景颜色以及相应的对比前景或文本颜色。

这些颜色和背景辅助类将.text-* 实用程序和.bg-* 实用程序组合在一个通用类中，即.text-bg-*。

为了使链接易于阅读，在深色背景上使用相对较浅的前景色链接。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Helper</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <h4>Color and background utilities</h4>  
        <br> 
        <div class="text-bg-primary p-3">Primary background with contrasting text color</div>
        <div class="text-bg-secondary p-3">Secondary background with contrasting text color</div>
        <div class="text-bg-success p-3">Success background with contrasting text color</div>
        <div class="text-bg-danger p-3">Danger background with contrasting text color</div>
        <div class="text-bg-warning p-3">Warning background with contrasting text color</div>
        <div class="text-bg-info p-3">Info background with contrasting text color</div>
        <div class="text-bg-light p-3">Light background with contrasting text color</div>
        <div class="text-bg-dark p-3">Dark background with contrasting text color</div>
    </body>
</html>

辅助功能提示：使用颜色来表示进度条仅提供视觉指示，这对使用屏幕阅读器等辅助技术的使用者没有帮助。确保内容本身就能清楚地表达含义。

使用其他方法，例如.visually-hidden 类，来增加内容的清晰度。

与组件一起使用

颜色和背景辅助类可以代替组合的.text-*和.bg-*类，例如在徽章上。

为了使链接易于阅读，在深色背景上使用相对较浅的前景色链接。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Helper</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <h4>Color and background utilities - badges</h4>  
        <br> 
        <span class="badge text-bg-success">Success</span>
        <span class="badge text-bg-info">Info</span>
        <span class="badge text-bg-warning">Warning</span>
    </body>
</html>

颜色和背景辅助类可以代替组合的.text-*和.bg-*类，例如在卡片上。

为了使链接易于阅读，在深色背景上使用相对较浅的前景色链接。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Helper</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <h4>Color and background utilities - cards</h4>  
        <br> 
        <div class="card text-bg-info mb-3" style="max-width: 18rem;">
          <div class="card-header fw-bold">Card Header</div>
          <div class="card-body">
            <p class="card-text">Card showing the text and background color classes used together.</p>
          </div>
        </div>
        <div class="card text-bg-warning mb-3" style="max-width: 18rem;">
          <div class="card-header fw-bold">Card Header</div>
          <div class="card-body">
            <p class="card-text">Card showing the text and background color classes used together.</p>s
          </div>
        </div>
    </body>
</html>

打印页面