跳到主要內容 跳到文檔導航
in English

顏色

Bootstrap 由廣泛的顏色系統支持,該系統以我們的樣式和組件為主題。這可以為任何項目實現更全面的定制和擴展。

主題顏色

我們使用所有顏色的子集來創建一個較小的調色板來生成配色方案,也可以作為 Sass 變量和 Bootstrapscss/_variables.scss文件中的 Sass 映射。

基本的
中學
成功
危險
警告
信息
黑暗的

所有這些顏色都可以作為 Sass 地圖使用,$theme-colors.

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

查看我們的 Sass 映射和循環文檔,了解如何修改這些顏色。

所有顏色

所有 Bootstrap 顏色都可用作 Sass 變量和scss/_variables.scss文件中的 Sass 映射。為避免增加文件大小,我們不會為每個變量創建文本或背景顏色類。相反,我們選擇這些顏色的子集作為主題調色板

在自定義顏色時,請務必監控對比度。如下所示,我們為每種主要顏色添加了三種對比度——一種用於色板的當前顏色,一種用於對抗白色,一種用於對抗黑色。

$藍色#0d6efd
$藍色-100
$藍色-200
$藍色-300
$藍色-400
$藍色-500
$藍色-600
$藍色-700
$藍色-800
$藍色-900
$靛藍#6610f2
$靛藍-100
$靛藍-200
$靛藍-300
$靛藍-400
$靛藍-500
$靛藍-600
$靛藍-700
$靛藍-800
$靛藍-900
$紫色#6f42c1
$紫100
$紫200
$紫300
$紫400
$紫500
$紫600
$紫700
$紫800
$紫900
$粉紅色#d63384
$粉紅-100
$粉紅色-200
$粉紅-300
$粉紅-400
$粉紅-500
$粉紅-600
$粉色-700
$粉色-800
$粉色-900
$紅色#dc3545
$紅-100
$red-200
$red-300
$紅-400
$red-500
$red-600
$red-700
$red-800
$red-900
$橙色#fd7e14
$橙色-100
$橙色-200
$橙色-300
$橙色-400
$橙色-500
$橙色-600
$橙色-700
$橙色-800
$橙色-900
$黃色#ffc107
$黃100
$黃色-200
$黃色-300
$黃色-400
$黃色-500
$黃色-600
$黃色-700
$黃色-800
$黃色-900
$綠色#198754
$green-100
$green-200
$green-300
$green-400
$green-500
$綠色-600
$綠色-700
$green-800
$綠色-900
$藍綠色#20c997
100 美元
200 美元
300 美元
$青色-400
$青色-500
$青色-600
$青色-700
$青色-800
900 美元
$青色#0dcaf0
$青色-100
$青色-200
$青色-300
$青色-400
$青色-500
$青色-600
$青色-700
$青色-800
$青色-900
$灰色-500#adb5bd
$灰色-100
$灰色-200
$灰色-300
$灰色-400
$灰色-500
$灰色-600
$灰色-700
$灰色-800
$灰色-900
$黑色#000
$白色#fff

Sass 註釋

Sass 無法以編程方式生成變量,因此我們自己手動為每種色調和陰影創建變量。我們指定中點值(例如,$blue-500)並使用自定義顏色函數通過 Sass 的mix()顏色函數著色(變亮)或陰影(變暗)我們的顏色。

使用與andmix()不一樣——前者將指定顏色與白色或黑色混合,而後者只調整每種顏色的亮度值。結果是一套更完整的顏色,如CodePen 演示中所示lighten()darken()

我們的tint-color()shade-color()函數mix()與我們的$theme-color-interval變量一起使用,它為我們產生的每種混合顏色指定一個階梯百分比值。請參閱scss/_functions.scssscss/_variables.scss文件以獲取完整的源代碼。

彩色 Sass 貼圖

Bootstrap 的 Sass 源文件包括三個地圖,可幫助您快速輕鬆地遍歷顏色列表及其十六進制值。

  • $colors列出我們所有可用的基礎 ( 500) 顏色
  • $theme-colors列出所有語義命名的主題顏色(如下所示)
  • $grays列出所有色調和灰色陰影

scss/_variables.scss中,您會找到 Bootstrap 的顏色變量和 Sass 映射。$colors這是Sass 映射的示例:

$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
);

在地圖中添加、刪除或修改值以更新它們在許多其他組件中的使用方式。不幸的是,目前並不是每個組件都使用這個 Sass 映射。未來的更新將努力改進這一點。在那之前,計劃使用${color}變量和這個 Sass 映射。

例子

以下是在 Sass 中使用這些的方法:

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

顏色背景實用程序類也可用於設置colorbackground-color使用500顏色值。

生成實用程序

在 v5.1.0 中添加

Bootstrap 不包含每個顏色變量color的實用程序,但您可以使用我們的實用程序 API和我們在 v5.1.0 中添加的擴展 Sass 映射background-color自己生成這些。

  1. 首先,確保您已經導入了我們的函數、變量、mixin 和實用程序。
  2. 使用我們的map-merge-multiple()功能可以將多個 Sass 映射快速合併到一個新映射中。
  3. 合併這個新的組合映射以擴展任何具有{color}-{level}類名的實用程序。

.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}這將為每種顏色和級別生成新的實用程序。您也可以對任何其他實用程序和財產執行相同的操作。