Farby
Preneste význam prostredníctvom farieb s niekoľkými triedami farieb. Zahŕňa aj podporu pre styling odkazov so stavmi vznášania.
Farba
.text-primárny
.text-sekundárny
.text-úspech
.text-nebezpečenstvo
.textové varovanie
.text-info
.text-light
.text-tmavý
.text-body
.text stlmený
.text-biely
.text-black-50
.text-biely-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>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 ďalší štýl odkazu okrem podčiarknutia.
<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>Farba pozadia
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>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>Prechod pozadia
Keď $enable-gradientsje nastavené na true(predvolené je false), môžete použiť .bg-gradient-pomocné triedy. Prečítajte si o našich možnostiach Sass na aktiváciu týchto tried a ďalších.
.bg-gradient-primary.bg-gradient-secondary.bg-gradient-success.bg-gradient-danger.bg-gradient-warning.bg-gradient-info.bg-gradient-light.bg-gradient-dark
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.