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

列印頁面