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