Бои
Пренесете го значењето преку бојата со неколку класи за употреба во боја. Вклучува и поддршка за стилски врски со состојби на лебдење.
Боја
.текст-основно
.текст-секундарна
.текст-успех
.текст-опасност
.текст-предупредување
.текст-информации
.текст-светло
.текст-темно
.текст-тело
.текст-исклучен
.текст-бело
.текст-црно-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-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>
<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
Справување со специфичноста
Понекогаш контекстуалните класи не можат да се применат поради специфичноста на друг селектор. Во некои случаи, доволно решение е да ја завиткате содржината на вашиот елемент во а <div>со класата.
Пренесување значење на помошните технологии
Користењето боја за додавање значење обезбедува само визуелна индикација, која нема да биде пренесена до корисниците на помошни технологии - како што се читачите на екранот. Осигурајте се дека информациите означени со бојата се или очигледни од самата содржина (на пр. видлив текст), или се вклучени преку алтернативни средства, како што е дополнителен текст скриен со .sr-onlyкласата.