Боје
Пренесите значење кроз боју помоћу прегршт корисних класа боја. Укључује и подршку за стилизовање веза са стањима лебдења.
Боја
.текст-примарни
.текст-секундарни
.текст-успех
.текст-опасност
.текст-упозорење
.тект-инфо
.текст-светло
.текст-таман
.тело текста
.тект-мутед
.текст-бели
.тект-блацк-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-услужне класе. Сазнајте више о нашим Сасс опцијама да омогућите ове часове и још много тога.
.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класом.