Боје
Пренесите значење помоћу colorпрегршт корисних класа боја. Укључује и подршку за стилизовање веза са стањима лебдења.
Боје
Обојите текст помоћу услужних програма за боје. Ако желите да бојите везе, можете користити .link-*помоћне класе које имају :hoverи :focusстања.
.текст-примарни
.текст-секундарни
.текст-успех
.текст-опасност
.текст-упозорење
.тект-инфо
.текст-светло
.текст-таман
.тело текста
.тект-мутед
.текст-бели
.тект-блацк-50
.текст-бели-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>или више семантичких елемената са жељеном класом.
Сасс
Поред следеће Сасс функционалности, размислите о читању о нашим укљученим ЦСС прилагођеним својствима (ака ЦСС променљиве) за боје и још много тога.
Променљиве
Већина 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;
Мапа
Боје теме се затим стављају у Сасс мапу тако да можемо да их пређемо у петљу да генеришемо наше услужне програме, модификаторе компоненти и још много тога.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Боје у нијансама сиве су такође доступне као Сасс мапа. Ова мапа се не користи за генерисање било каквих услужних програма.
$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
);
Утилитиес АПИ
Услужни програми за боје су декларисани у нашем АПИ-ју за услужне програме у scss/_utilities.scss. Научите како да користите услужни АПИ.
"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,
)
)
),