Цвят
Bootstrap се поддържа от обширна цветова система, която тематизира нашите стилове и компоненти. Това позволява по-цялостно персонализиране и разширение за всеки проект.
Цветове на темата
Ние използваме подмножество от всички цветове, за да създадем по-малка цветова палитра за генериране на цветови схеми, също налични като Sass променливи и Sass карта във scss/_variables.scss
файла на Bootstrap.
Всички тези цветове са налични като Sass карта, $theme-colors
.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Вижте нашите Sass карти и документи за цикли за това как да промените тези цветове.
Всички цветове
Всички цветове на Bootstrap са налични като Sass променливи и Sass карта във scss/_variables.scss
файл. За да избегнем увеличените размери на файловете, ние не създаваме класове за цвят на текст или фон за всяка от тези променливи. Вместо това избираме подгрупа от тези цветове за тематична палитра .
Не забравяйте да наблюдавате контрастните съотношения, докато персонализирате цветовете. Както е показано по-долу, добавихме три контрастни съотношения към всеки от основните цветове – един за текущите цветове на мостра, един срещу бяло и един срещу черно.
Бележки за Sass
Sass не може програмно да генерира променливи, така че сами ръчно създадохме променливи за всеки нюанс. Ние определяме средната стойност (напр. $blue-500
) и използваме персонализирани функции за цвят, за да оцветим (изсветлим) или засенчим (потъмним) нашите цветове чрез mix()
функцията за цвят на Sass.
Използването mix()
не е същото като lighten()
и darken()
— първото смесва посочения цвят с бяло или черно, докато второто само регулира стойността на светлота на всеки цвят. Резултатът е много по-пълен набор от цветове, както е показано в тази демонстрация на CodePen .
Нашите tint-color()
и shade-color()
функции използват mix()
заедно с нашата $theme-color-interval
променлива, която определя стъпаловидна процентна стойност за всеки смесен цвят, който произвеждаме. Вижте scss/_functions.scss
и scss/_variables.scss
файловете за пълния изходен код.
Цветни карти на Sass
Изходните Sass файлове на Bootstrap включват три карти, които ви помагат бързо и лесно да преминете през списък с цветове и техните шестнадесетични стойности.
$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
помощни background-color
програми за всяка цветна променлива, но можете да ги генерирате сами с нашия API за помощни програми и нашите разширени Sass карти, добавени във v5.1.0.
- За да започнете, уверете се, че сте импортирали нашите функции, променливи, миксини и помощни програми.
- Използвайте нашата
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}
помощни програми за всеки цвят и ниво. Можете да направите същото и за всяка друга полезност и собственост.