View on GitHub

色彩 (Color)

Bootstrap 有以我們的樣式與組件為主題的豐富色彩系統支援。如此一來可以對任何項目進行更全面的響應式及擴展。

六角學院的 Bootstrap 5 課程上線囉，立即與萬人一同學習最專業、最深入的 Bootstrap 5 課程。

立即上課去

On this page

主題色彩

我們使用所有顏色的子集來創造較小的調色板以產生配色方案，也可以在 Bootstrap 的 scss/_variables.scss 資料夾中將其作為 Sass variables 與 Sass map 來使用。

Primary

Secondary

Success

Danger

Warning

Info

Light

Dark

所有的色彩都能作為 Sass map 中的 $theme-colors 來使用。

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

查看我們的 Sass maps 與 loops docs 了解如何修改這些色彩。

所有色彩

所有的 Bootstrap 色彩都可以作為 scss/_variables.scss 資料夾中的 Sass variables 與 Sass map 做使用。為了避免增加文件大小，我們不會為每個變數創建文本或背景色彩類別。相反地，我們為主題色彩選擇這些顏色的子集。

建立自定義色彩時，請確保其對比度。如下圖所示，我們為每個主題色彩添加了三個對比度，一個用於當前色版的顏色，一種用於反白，以及一種用於反黑。

$blue #0d6efd

$blue-100

$blue-200

$blue-300

$blue-400

$blue-500

$blue-600

$blue-700

$blue-800

$blue-900

$indigo #6610f2

$indigo-100

$indigo-200

$indigo-300

$indigo-400

$indigo-500

$indigo-600

$indigo-700

$indigo-800

$indigo-900

$purple #6f42c1

$purple-100

$purple-200

$purple-300

$purple-400

$purple-500

$purple-600

$purple-700

$purple-800

$purple-900

$pink #d63384

$pink-100

$pink-200

$pink-300

$pink-400

$pink-500

$pink-600

$pink-700

$pink-800

$pink-900

$red #dc3545

$red-100

$red-200

$red-300

$red-400

$red-500

$red-600

$red-700

$red-800

$red-900

$orange #fd7e14

$orange-100

$orange-200

$orange-300

$orange-400

$orange-500

$orange-600

$orange-700

$orange-800

$orange-900

$yellow #ffc107

$yellow-100

$yellow-200

$yellow-300

$yellow-400

$yellow-500

$yellow-600

$yellow-700

$yellow-800

$yellow-900

$green #198754

$green-100

$green-200

$green-300

$green-400

$green-500

$green-600

$green-700

$green-800

$green-900

$teal #20c997

$teal-100

$teal-200

$teal-300

$teal-400

$teal-500

$teal-600

$teal-700

$teal-800

$teal-900

$cyan #0dcaf0

$cyan-100

$cyan-200

$cyan-300

$cyan-400

$cyan-500

$cyan-600

$cyan-700

$cyan-800

$cyan-900

$gray-500 #adb5bd

$gray-100

$gray-200

$gray-300

$gray-400

$gray-500

$gray-600

$gray-700

$gray-800

$gray-900

$black #000

$white #fff

Sass 筆記

Sass 無法以編程方式產生變數，因此我們手動創造每一個色彩與陰影的變數。我們指明一個中間值（e.g., $blue-500）並使用自定義色彩透過 Sass 的 mix() 函數去著色（變亮）或加深（變暗）。

使用 mix() 不同於 lighten() 與 darken() ，前者將指定的色彩與白色或黑色混合，而後者僅調整每個色彩的亮度，最終產生一套更完整的色彩，如此 CodePen 範例中所示。

我們的 tint-color() 與 shade-color() 函數在 $theme-color-interval 變數旁使用 mix() ，他為我們的混合色彩指定了階層式的百分比值。有關完整的源代碼請參照 scss/_functions.scss 與 scss/_variables.scss 文件。

Color Sass maps

Bootstrap 的 Sass 文件包含三個 maps ，來幫助您快速輕鬆的循環顯示色彩及其十六進制值的列表。

$colors 列出了我們能使用的基礎 (500) 顏色
$theme-colors 列出了所有已與義命名的主題色彩（如下所示）
$grays 列出了所有灰階的的色調與陰影

在 scss/_variables.scss 中，您將會找到 Bootstrap 的色彩變數與 Sass map。這是 $colors Sass map 的範例：

$colors: (
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

在 map 中添加、移除或修改數值，以更新他們在許多其他元件中的使用方式。不幸的是，此時並非每個元件都使用 Sass map。未來的更新將努力對此進行改進。在此之前，請使用 ${color} 變數及此 Sass map。

範例

您可以在 Sass 中使用這些方法：

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

顏色和背景通用類別也可用 500 顏色值設定 color 與 background-color。

Generating utilities

Added in v5.1.0

Bootstrap 不包括提供各種顏色變數的 color 和 background-color 通用類別，但是你可以使用我們的 utility API 和在 v5.1.0 增加的 extended Sass maps 來自行產生。

首先，確保你有導入我們的 functions, variables, mixins 和 utilities.
使用我們的 map-merge-multiple() 函式，快速合併多個 Sass maps 在一個新的 map 中。
合併這個新的 combined map 去擴展任何關於 {color}-{level} 類別名稱的通用類別。

這裡有一個使用上述步驟產生的文本顏色通用類別的例子 (e.g., .text-purple-500)。

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);

$utilities: map-merge(
  $utilities,
  (
    "color": map-merge(
      map-get($utilities, "color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "color"), "values"),
          (
            $all-colors
          ),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

這樣將會產生新的 .text-{color}-{level} 通用類別對所有 color 和 level. 你可以對任何其他通用類別與屬性執行相同操作。