Кольори
Передайте зміст за colorдопомогою кількох корисних класів кольорів. Включає також підтримку стилізації посилань із станами наведення.
Кольори
Розфарбуйте текст за допомогою кольорових утиліт. Якщо ви хочете розфарбувати посилання, ви можете використовувати .link-*допоміжні класи , які мають стани :hoverі :focus.
.text-primary
.text-secondary
.text-success
.text-danger
.текст-попередження
.text-info
.text-light
.text-dark
.text-body
.text-muted
.текст-білий
.text-black-50
.text-white-50
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning bg-dark">.text-warning</p>
<p class="text-info bg-dark">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>Передача значення допоміжним технологіям
Використання кольору для додання значення забезпечує лише візуальну індикацію, яка не буде передана користувачам допоміжних технологій, таких як програми зчитування з екрана. Переконайтеся, що інформація, позначена кольором, або очевидна з самого вмісту (наприклад, видимого тексту), або включена за допомогою альтернативних засобів, таких як додатковий текст, прихований разом із .visually-hiddenкласом.
Специфіка
Іноді контекстні класи неможливо застосувати через специфіку іншого селектора. У деяких випадках достатнім обхідним шляхом є загортання вмісту вашого елемента в <div>семантичний елемент або більше з потрібним класом.
Сасс
На додаток до наведених нижче функціональних можливостей Sass, подумайте прочитати про наші включені спеціальні властивості CSS (також відомі як змінні CSS) для кольорів тощо.
Змінні
Більшість colorутиліт генеруються кольорами нашої теми, перепризначеними з наших загальних змінних колірної палітри.
$blue: #0d6efd;
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #d63384;
$red: #dc3545;
$orange: #fd7e14;
$yellow: #ffc107;
$green: #198754;
$teal: #20c997;
$cyan: #0dcaf0;
$primary: $blue;
$secondary: $gray-600;
$success: $green;
$info: $cyan;
$warning: $yellow;
$danger: $red;
$light: $gray-100;
$dark: $gray-900;
Також доступні кольори відтінків сірого, але для створення будь-яких утиліт використовується лише частина.
$white: #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black: #000;
Карта
Потім кольори теми додаються до карти Sass, щоб ми могли циклічно використовувати їх для генерації наших утиліт, модифікаторів компонентів тощо.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Кольори відтінків сірого також доступні як карта Sass. Ця карта не використовується для створення будь-яких утиліт.
$grays: (
"100": $gray-100,
"200": $gray-200,
"300": $gray-300,
"400": $gray-400,
"500": $gray-500,
"600": $gray-600,
"700": $gray-700,
"800": $gray-800,
"900": $gray-900
);
API утиліт
Утиліти кольору оголошено в нашому API утиліт у scss/_utilities.scss. Дізнайтеся, як використовувати API утиліт.
"color": (
property: color,
class: text,
values: map-merge(
$theme-colors,
(
"white": $white,
"body": $body-color,
"muted": $text-muted,
"black-50": rgba($black, .5),
"white-50": rgba($white, .5),
"reset": inherit,
)
)
),