Цветове
Предайте значение чрез цвят с шепа цветни полезни класове. Включва и поддръжка за стилизиране на връзки със състояния на задържане.
Цвят
.текст-основен
.текст-вторичен
.текст-успех
.текст-опасност
.текстово предупреждение
.text-info
.текстова светлина
.текст-тъмен
.text-body
.text-muted
.текст-бял
.text-black-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">.text-warning</p>
<p class="text-info">.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>Контекстните текстови класове също работят добре върху котви с предоставените състояния на задържане и фокусиране. Имайте предвид, че класът .text-whiteand .text-mutedняма допълнителен стил на връзката освен подчертаване.
<p><a href="#" class="text-primary">Primary link</a></p>
<p><a href="#" class="text-secondary">Secondary link</a></p>
<p><a href="#" class="text-success">Success link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-warning">Warning link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light bg-dark">Light link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White link</a></p>Цвят на фона
Подобно на контекстните класове за цвят на текст, лесно задайте фона на елемент на всеки контекстуален клас. Компонентите на котвата ще потъмнеят при задържане, точно както текстовите класове. Фоновите помощни програми не задаватcolor , така че в някои случаи ще искате да използвате .text-*помощни програми.
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>Фонов градиент
Когато $enable-gradientsе настроено на true(по подразбиране е false), можете да използвате .bg-gradient-помощни класове. Научете за нашите Sass опции, за да активирате тези класове и други.
.bg-gradient-primary.bg-gradient-secondary.bg-gradient-success.bg-gradient-danger.bg-gradient-warning.bg-gradient-info.bg-gradient-light.bg-gradient-dark
Справяне със спецификата
Понякога контекстуалните класове не могат да бъдат приложени поради спецификата на друг селектор. В някои случаи достатъчно заобиколно решение е да обвиете съдържанието на вашия елемент в a <div>с класа.
Предаване на значение на помощните технологии
Използването на цвят за добавяне на смисъл осигурява само визуална индикация, която няма да бъде предадена на потребителите на помощни технологии – като екранни четци. Уверете се, че информацията, обозначена с цвета, е или очевидна от самото съдържание (напр. видимия текст), или е включена чрез алтернативни средства, като например допълнителен текст, скрит с .sr-onlyкласа.