Бои
Пренесете го значењето преку бојата со неколку класи за употреба во боја. Вклучува и поддршка за стилски врски со состојби на лебдење.
.текст-основно
.текст-секундарна
.текст-успех
.текст-опасност
.текст-предупредување
.текст-информации
.текст-светло
.текст-темно
.текст-исклучен
.текст-бело
<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-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>Класите со текстуален текст исто така добро функционираат на сидра со дадените состојби на лебдење и фокусирање. Забележете дека .text-whiteи .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>Кога $enable-gradientsе поставено на точно, ќе можете да користите .bg-gradient-класи на алатки. Стандардно, $enable-gradientsе оневозможено и примерот подолу е намерно скршен. Ова е направено за полесно прилагодување од моментот кога ќе почнете да го користите Bootstrap. Дознајте повеќе за нашите Sass опции за да ги овозможите овие класи и повеќе.
<div class="p-3 mb-2 bg-gradient-primary text-white">.bg-gradient-primary</div>
<div class="p-3 mb-2 bg-gradient-secondary text-white">.bg-gradient-secondary</div>
<div class="p-3 mb-2 bg-gradient-success text-white">.bg-gradient-success</div>
<div class="p-3 mb-2 bg-gradient-danger text-white">.bg-gradient-danger</div>
<div class="p-3 mb-2 bg-gradient-warning text-dark">.bg-gradient-warning</div>
<div class="p-3 mb-2 bg-gradient-info text-white">.bg-gradient-info</div>
<div class="p-3 mb-2 bg-gradient-light text-dark">.bg-gradient-light</div>
<div class="p-3 mb-2 bg-gradient-dark text-white">.bg-gradient-dark</div>Справување со специфичноста
Понекогаш контекстуалните класи не можат да се применат поради специфичноста на друг селектор. Во некои случаи, доволно решение е да ја завиткате содржината на вашиот елемент во а <div>со класата.
Пренесување значење на помошните технологии
Користењето боја за додавање значење обезбедува само визуелна индикација, која нема да биде пренесена до корисниците на помошни технологии - како што се читачите на екранот. Осигурајте се дека информациите означени со бојата се или очигледни од самата содржина (на пр. видлив текст), или се вклучени преку алтернативни средства, како што е дополнителен текст скриен со .sr-onlyкласата.