Faarwen
Vermëttelt Bedeitung duerch Faarf mat enger Handvoll Faarf Utility Klassen. Ëmfaasst Ënnerstëtzung fir Styling Links mat Hover Staaten och.
Ë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.
Faarf
.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>Hannergrondfaarf
Ä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>Hannergrondgradient
Wann $enable-gradientsgesat ass true(Standard ass false), kënnt Dir .bg-gradient-Utility Klassen benotzen. Léiert iwwer eis Sass Optiounen fir dës Klassen a méi z'aktivéieren.
.bg-gradient-primary.bg-gradient-secondary.bg-gradient-success.bg-gradient-danger.bg-gradient-warning.bg-gradient-info.bg-gradient-light.bg-gradient-dark