Faarwen
Vermëttelt Bedeitung duerch Faarf mat enger Handvoll Faarf Utility Klassen. Ëmfaasst Ënnerstëtzung fir Styling Links mat Hover Staaten och.
.text-primär
.text-sekundär
.Text-Erfolleg
.Text-Gefor
.Text-Warnung
.text-info
.Text-Liicht
.Text-däischter
.Text-Kierper
.Text gedämpft
.Text-wäiss
.text-schwaarz-50
.text-wäiss-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>Kontextuell Textklassen funktionnéieren och gutt op Anker mat de geliwwerten Hover- a Fokuszoustanden. Bedenkt datt d' .text-whitea .text-mutedKlass keng zousätzlech Link Styling doriwwer eraus ënnersträichen huet.
<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>Ähnlech wéi de kontextuellen Textfaarfklassen, setzt den Hannergrond vun engem Element einfach op all kontextuell Klass. Ankerkomponenten ginn däischter beim Hover, grad wéi d'Textklassen. Background Utilities setzen netcolor , also a ville Fäll wëllt Dir .text-*Utilities benotzen.
<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>Wann $enable-gradientsop richteg gesat ass, kënnt Dir .bg-gradient-Utility Klassen benotzen. Par défaut $enable-gradientsass deaktivéiert an d'Beispill hei drënner ass bewosst gebrach. Dëst gëtt gemaach fir méi einfach Personnalisatioun vum Moment wou Dir Bootstrap benotzt. Léiert iwwer eis Sass Optiounen fir dës Klassen a méi z'aktivéieren.
<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>Ëmgank mat Spezifizitéit
Heiansdo kënnen kontextuell Klassen net applizéiert ginn wéinst der Spezifizitéit vun engem anere Selektor. A verschiddene Fäll ass eng genuch Léisung fir Ären Element Inhalt an engem <div>mat der Klass ze wéckelen.
Bedeitung vun Hëllefstechnologien
D'Faarf benotze fir Bedeitung ze addéieren gëtt nëmmen eng visuell Indikatioun, déi net un d'Benotzer vun Assistenztechnologien vermëttelt gëtt - sou wéi Écran Lieser. Vergewëssert Iech datt d'Informatioun, déi mat der Faarf bezeechent gëtt, entweder offensichtlech aus dem Inhalt selwer ass (zB dem siichtbaren Text), oder duerch alternativ Mëttelen abegraff ass, sou wéi zousätzlech Text verstoppt mat der .sr-onlyKlass.