Бои
Пренесете го значењето преку 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>или повеќе семантички елемент со саканата класа.
Сас
Покрај следнава 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
);
Utilities API
Услугите за боја се декларирани во нашите Utilities API во scss/_utilities.scss. Научете како да ги користите Utilities 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,
)
)
),