колір
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}
утиліти для кожного кольору та рівня. Ви можете зробити те саме для будь-якої іншої комунальної власності та власності.