Bootstrap - 颜色

本章将讨论 Bootstrap Colors 类。您可以使用 Bootstrap 的自定义类为文本或背景添加颜色，从而为您的内容添加一些含义。

文字颜色

添加.text-*等颜色实用程序来为文本着色。

从 Bootstrap 的原始$theme-colors Sass 映射生成的颜色实用程序（如.text-*）尚未响应颜色模式。这将在版本 6 中得到解决。

例子

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


    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Textual Colors</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.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
    <div class="container mt-3">
      <h4>Contextual Colors</h4>
      <p>Use the contextual classes to provide "meaning through colors":</p>
      <p class="text-muted">Text marked by this class is muted.</p>
      <p class="text-primary">Text marked by this class is important.</p>
      <p class="text-primary-emphasis">Text marked by this class is darker than that displayed by .text-primary class.</p>
      <p class="text-success">Text marked by this class indicates success.</p>
      <p class="text-success-emphasis">Text marked by this class is darker than that displayed by .text-success class.</p>
      <p class="text-info">Text marked by this class represents some information.</p>
      <p class="text-info-emphasis">Text marked by this class is darker than that displayed by .text-info class.</p>
      <p class="text-warning">Text marked by this class represents a warning.</p>
      <p class="text-warning-emphasis">Text marked by this class is darker than that displayed by .text-warning class.</p>
      <p class="text-danger">Text marked by this class represents danger.</p>
      <p class="text-danger-emphasis">Text marked by this class is darker than that displayed by .text-danger class.</p>
      <p class="text-secondary">Text marked by this class is secondary text.</p>
      <p class="text-secondary-emphasis">Text marked by this class is darker than that displayed by .text-secondary class.</p>
      <p class="text-dark">Text marked by this class is displayed dark grey in color.</p>
      <p class="text-dark-emphasis">Text marked by this class is darker than that displayed by .text-dark class.</p>
      <p class="text-body">This class marks the default body color i.e. black.</p>
      <p class="text-body-emphasis">Text marked by this class is darker than that displayed by .text-body class.</p>
      <p class="text-body-secondary">Text marked by this class is lighter than that displayed by .text-body class.</p>
      <p class="text-body-tertiary">Text marked by this class is lighter than that displayed by .text-body-secondary class.</p>
      <p class="text-light">This class represents the text in light grey color, on a white background.</p>
      <p class="text-light-emphasis">Text marked by this class is lighter than that displayed by .text-light class.</p>
      <p class="text-white bg-dark">This class represents the text in white. on white background. In order to make the white text look clear, <b>bg-dark</b> class is used.</p>
      <p class="text-black bg-white">This class represents the text in black color. In order to make the black text color clear, <b>bg-white</b> class is used.</p>
    </div>
    </body>
    </html>

弃用：从 v5.1.0 开始弃用.text-black-50和.text-white-50等文本实用程序，并将从 v6.0.0 中删除它们。添加了新的实用程序，例如.text-opacity-* 。

弃用：由于添加了新的主题颜色和变量，自 v5.3.0 起，.text-muted 已被弃用。它将从 v6.0.0 中删除。它的默认值被重新分配给 CSS 变量--bs-secondary-color。

背景颜色

Bootstrap 提供了一组预定义的背景颜色 CSS 类，可以使用bg-*类将其应用于 HTML 元素。这些类允许您轻松地将背景颜色应用于网页中的各种组件，而无需编写自定义 CSS。

以下是 Bootstrap 提供的背景颜色类列表：

.bg-primary
.bg-成功
.bg-信息
.bg-警告
.bg-危险
.bg-次要
.bg-暗
.bg-light

例子

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Bootstrap Background Colors</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.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <div class="container mt-3">
        <h4>Background Colors</h4>
        <p>Use of background classes provided by Bootstrap to add meaning through colors.</p>
        <div class="bg-primary p-3">Sets the background color to the primary color defined in the Bootstrap theme.</div>
        <div class="bg-success p-3">Sets the background color to indicate success, typically green.</div>
        <div class="bg-info p-3">Sets the background color to indicate information, typically blue.</div>
        <div class="bg-warning p-3">Sets the background color to indicate a warning or caution, typically yellow.</div>
        <div class="bg-danger p-3">Sets the background color to indicate danger, typically red.</div>
        <div class="bg-secondary p-3">Sets the background color to the secondary color defined in the Bootstrap theme.</div>
        <div class="bg-dark p-3">Sets the background color to a dark color, typically a dark gray.</div>
        <div class="bg-light p-3">Sets the background color to a light color, typically a light gray.</div>
    </div>
    </body>
    </html>

背景文字颜色

Bootstrap 提供了一组预定义的文本颜色 CSS 类，可应用于 HTML 元素来自定义文本的颜色。这些类与背景颜色类（例如.bg-*类）结合使用，以控制应用了背景颜色的元素内文本的颜色。

以下是 Bootstrap 提供的背景文本颜色类列表：

.text-bg-primary
.text-bg-成功
.text-bg-信息
.text-bg-警告
.text-bg-危险
.text-bg-次要
.text-bg-dark
.text-bg-light

例子

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Bootstrap Colors - background text color</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
    <div class="container mt-3">
        <h4>Contrasting text Color as per the background color</h4>
        <p class="text-bg-primary">Sets the text color to the primary color defined in the Bootstrap theme.</p>
        <p class="text-bg-success">Sets the text color to indicate success, typically green.</p>
        <p class="text-bg-info">Sets the text color to indicate information, typically blue.</p>
        <p class="text-bg-warning">Sets the text color to indicate a warning or caution, typically yellow.</p>
        <p class="text-bg-danger">Sets the text color to indicate danger, typically red.</p>
        <p class="text-bg-secondary">Sets the text color to the secondary color defined in the Bootstrap theme.</p>
        <p class="text-bg-dark">Sets the text color to a dark color, typically dark gray.</p>
        <p class="text-bg-light">Sets the text color to a light color, typically light gray.</p>
    </div>
    </body>
    </html>

不透明度

Bootstrap 中的不透明度是指确定元素透明度级别的 CSS 属性。

Bootstrap 利用各种组件和实用程序类中的不透明度来控制元素的透明度。例如，Bootstrap 提供了.opacity-25、.opacity-50、.opacity-75 和 .opacity-100 等CSS 类，这些类可应用于元素以将其不透明度设置为25%、50%、75% 和 100分别为%。

例子

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Bootstrap Colors - Opacity </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>Example for Opacity of text</h4>
        <p class="text-primary">This is default primary text</p>
        <p class="text-primary text-opacity-75">This is 75% opacity primary text</p>
        <p class="text-primary text-opacity-50">This is 50% opacity primary text</p>
        <p class="text-primary text-opacity-25">This is 25% opacity primary text</p>
    </body>
    </html>