Цвет
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
значений цвета.
Генерация утилит
Добавлено в версии 5.1.0
Bootstrap не включает color
утилиты background-color
для каждой цветовой переменной, но вы можете создать их самостоятельно с помощью нашего API утилит и наших расширенных карт Sass, добавленных в версии 5.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}
утилиты для каждого цвета и уровня. Вы можете сделать то же самое для любой другой утилиты и свойства.