顏色

主題顏色

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

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

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

Check out our Sass maps and loops docs for how to modify these colors.

所有顏色

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

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

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

BBootstrap的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個顏色值設置顏色和背景色。