顏色
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 映射。為避免增加文件大小,我們不會為每個變量創建文本或背景顏色類。相反,我們選擇這些顏色的子集作為主題調色板。
在自定義顏色時,請務必監控對比度。如下所示,我們為每種主要顏色添加了三種對比度——一種用於色板的當前顏色,一種用於對抗白色,一種用於對抗黑色。
Sass 註釋
Sass 無法以編程方式生成變量,因此我們自己手動為每種色調和陰影創建變量。我們指定中點值(例如,$blue-500
)並使用自定義顏色函數通過 Sass 的mix()
顏色函數著色(變亮)或陰影(變暗)我們的顏色。
使用與andmix()
不一樣——前者將指定顏色與白色或黑色混合,而後者只調整每種顏色的亮度值。結果是一套更完整的顏色,如CodePen 演示中所示。lighten()
darken()
我們的tint-color()
和shade-color()
函數mix()
與我們的$theme-color-interval
變量一起使用,它為我們產生的每種混合顏色指定一個階梯百分比值。請參閱scss/_functions.scss
和scss/_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;
}
顏色和背景實用程序類也可用於設置color
和background-color
使用500
顏色值。
生成實用程序
在 v5.1.0 中添加
Bootstrap 不包含每個顏色變量color
的實用程序,但您可以使用我們的實用程序 API和我們在 v5.1.0 中添加的擴展 Sass 映射background-color
自己生成這些。
- 首先,確保您已經導入了我們的函數、變量、mixin 和實用程序。
- 使用我們的
map-merge-multiple()
功能可以將多個 Sass 映射快速合併到一個新映射中。 - 合併這個新的組合映射以擴展任何具有
{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}
這將為每種顏色和級別生成新的實用程序。您也可以對任何其他實用程序和財產執行相同的操作。