Skip to main content Skip to docs navigation
View on GitHub

色彩 (Color)

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

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

立即上課去

主題色彩

我們使用所有顏色的子集來創造較小的調色板以產生配色方案,也可以在 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.scssscss/_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 顏色值設定 colorbackground-color

Generating utilities

Added in v5.1.0

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

  1. 首先,確保你有導入我們的 functions, variables, mixins 和 utilities.
  2. 使用我們的 map-merge-multiple() 函式,快速合併多個 Sass maps 在一個新的 map 中。
  3. 合併這個新的 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. 你可以對任何其他通用類別與屬性執行相同操作。