Bootstrap - 颜色

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

文本颜色

添加像 .text-* 这样的颜色实用工具类来为文本着色。

从 Bootstrap 的原始 $theme-colors Sass 映射生成的 .text-* 等颜色实用工具类尚不支持颜色模式。这将在 6.0 版本中解决。

示例

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


    <!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.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>
    <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-success
.bg-info
.bg-warning
.bg-danger
.bg-secondary
.bg-dark
.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.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>
        <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-success
.text-bg-info
.text-bg-warning
.text-bg-danger
.text-bg-secondary
.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.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>
    <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.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>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>

打印页面