Bootstrap5 顏色

Bootstrap 由廣泛的顏色系統(tǒng)支持，該系統(tǒng)以我們的樣式和組件為主題。這可以為任何項目提供更全面的定制和擴展。

主題色

我們使用所有顏色的一個子集來創(chuàng)建一個較小的調(diào)色板來生成配色方案，也可以在Bootstrap的 scss/_variables.scss 文件中將其作為Sass變量和Sass映射使用。

所有這些顏色都可以作為Sass map $theme-colors使用。

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

查看我們的 Sass 映射和循環(huán)文檔，了解如何修改這些顏色。

所有顏色

所有 Bootstrap 顏色都可用作 Sass 變量和?scss/_variables.scss?文件中的 Sass 映射。為避免增加文件大小，我們不會為這些變量中的每一個創(chuàng)建文本或背景顏色類。相反，我們?yōu)?a href="#theme-colors">主題調(diào)色板選擇這些顏色的子集。

在定義顏色時一定要注意查看對比度。如下圖所示，為每種主顏色添加了三種對比度，一種是針對當前的顏色，一種是針對白色，另一種是針對黑色。

Sass 的注意事項

Sass 無法以編程方式生成變量，因此我們自己為每個色調(diào)和陰影手動創(chuàng)建變量。我們指定中點值（例如，$blue-500）并使用自定義顏色函數(shù)通過 Sass 的mix()顏色函數(shù)對我們的顏色進行著色（變亮）或陰影（變暗）。

usingmix()與lighten()and 不同darken()——前者將指定顏色與白色或黑色混合，而后者僅調(diào)整每種顏色的亮度值。結(jié)果是一套更完整的顏色，如這個 CodePen 演示所示。

我們的tint-color()和shade-color()函數(shù)mix()與我們的$theme-color-interval變量一起使用，它為我們產(chǎn)生的每種混合顏色指定一個階梯百分比值。有關(guān)完整源代碼，請參閱scss/_functions.scss和scss/_variables.scss文件。

彩色 Sass 貼圖

Bootstrap 的源 Sass 文件包括三個映射，可幫助您快速輕松地循環(huán)遍歷顏色列表及其十六進制值。

• $colors列出我們所有可用的基礎(chǔ) ( 500) 顏色
• $theme-colors 列出所有語義命名的主題顏色（如下所示）
• $grays 列出所有的灰色調(diào)

在 中scss/_variables.scss，您將找到 Bootstrap 的顏色變量和 Sass 映射。這是$colorsSass 映射的示例：

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

顏色和背景實用程序類也可用于設(shè)置color和background-color使用500顏色值。

生成實用程序

在 v5.1.0 中添加

引導(dǎo)不包括color與background-color每一個顏色可變的實用程序，但你可以與我們產(chǎn)生這些自己實用API和我們的擴展映射薩斯在V5.1.0增加。

1. 首先，請確保您已導(dǎo)入我們的函數(shù)、變量、mixin 和實用程序。
2. 使用我們的map-merge-multiple()函數(shù)將多個 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}每種顏色和級別生成新的實用程序。您也可以對任何其他實用程序和財產(chǎn)執(zhí)行相同的操作。