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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/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/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/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>