Bootstrap 简明教程

Bootstrap - Colors

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

Text Colors

添加像 .text- * 这样的颜色工具程序来给文本着色。

Example

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

    <!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>

Background Colors

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

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

  1. .bg-primary

  2. .bg-success

  3. .bg-info

  4. .bg-warning

  5. .bg-danger

  6. .bg-secondary

  7. .bg-dark

  8. .bg-light

Example

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

    <!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>

Background Text Colors

Bootstrap 为文本颜色提供了一组预定义的 CSS 类，这些类可以应用于 HTML 元素以自定义文本颜色。这些类与 .bg- * 类等背景颜色类一起使用，以控制具有背景颜色的元素中文本的颜色。

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

  1. .text-bg-primary

  2. .text-bg-success

  3. .text-bg-info

  4. .text-bg-warning

  5. .text-bg-danger

  6. .text-bg-secondary

  7. .text-bg-dark

  8. .text-bg-light

Example

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

    <!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>

Opacity

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

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

Example

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

    <!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>