Farby
Preneste význam prostredníctvom farieb s niekoľkými triedami farieb. Zahŕňa aj podporu pre styling odkazov so stavmi vznášania.
.text-primárny
.text-sekundárny
.text-úspech
.text-nebezpečenstvo
.textové varovanie
.text-info
.text-light
.text-tmavý
.text stlmený
.text-biely
<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>Triedy kontextového textu tiež fungujú dobre na kotvách s poskytnutými stavmi kurzora a zamerania. Všimnite si, že trieda .text-whiteand .text-mutednemá žiadny štýl odkazu.
<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>Podobne ako pri kontextových triedach farieb textu, jednoducho nastavte pozadie prvku na akúkoľvek kontextovú triedu. Komponenty kotvy stmavnú pri umiestnení kurzora myši, rovnako ako triedy textu. Pomocné programy na pozadí nie sú nastavenécolor , takže v niektorých prípadoch budete chcieť použiť .text-*pomocné programy.
<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>Keď $enable-gradientsje nastavené na hodnotu true, budete môcť používať .bg-gradient-pomocné triedy. V predvolenom nastavení $enable-gradientsje zakázané a príklad nižšie je zámerne porušený. Toto sa robí pre jednoduchšie prispôsobenie od okamihu, keď začnete používať Bootstrap. Prečítajte si o našich možnostiach Sass na aktiváciu týchto tried a ďalších.
<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>Zaobchádzanie so špecifickosťou
Niekedy sa kontextové triedy nedajú použiť kvôli špecifickosti iného selektora. V niektorých prípadoch je dostatočným riešením zabaliť obsah vášho prvku <div>do triedy s triedou.
Odovzdanie významu asistenčným technológiám
Použitie farby na pridanie významu poskytuje iba vizuálnu indikáciu, ktorá nebude poskytnutá používateľom asistenčných technológií – ako sú čítačky obrazovky. Uistite sa, že informácia označená farbou je buď zrejmá zo samotného obsahu (napr. viditeľný text), alebo je zahrnutá alternatívnymi prostriedkami, ako je dodatočný text skrytý spolu s .sr-onlytriedou.