Koloroj
Transdonu signifon per koloro per manpleno da koloraj utilaj klasoj. Inkluzivas ankaŭ subtenon por stilaj ligiloj kun ŝvebŝtatoj.
Koloro
.text-primary
.teksto-sekundara
.teksto-sukceso
.teksto-danĝero
.teksto-averto
.text-info
.teksto-lumo
.teksto-malluma
.teksto-korpo
.text-mutita
.teksto-blanka
.teksto-nigra-50
.teksto-blanka-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>Kuntekstaj tekstoklasoj ankaŭ bone funkcias sur ankroj kun la provizitaj ŝvebado kaj fokuso ŝtatoj. Notu, ke la klaso .text-whitekaj .text-mutedne havas aldonan ligstilon preter substreko.
<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>Fona koloro
Simile al la kuntekstaj tekstaj kolorklasoj, facile agordu la fonon de elemento al iu ajn kunteksta klaso. Ankraj komponantoj mallumiĝos dum ŝvebado, same kiel la tekstaj klasoj. Fonaj iloj ne agordascolor , do en iuj kazoj vi volos uzi .text-*ilojn.
<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>Fona gradiento
Kiam $enable-gradientsestas agordita al true(defaŭlte estas false), vi povas uzi .bg-gradient-utilajn klasojn. Lernu pri niaj Sass-opcioj por ebligi ĉi tiujn klasojn kaj pli.
.bg-gradient-primary.bg-gradient-secondary.bg-gradient-success.bg-gradient-danger.bg-gradient-warning.bg-gradient-info.bg-gradient-light.bg-gradient-dark
Traktante specifecon
Foje kuntekstaj klasoj ne povas esti aplikataj pro la specifeco de alia elektilo. En iuj kazoj, sufiĉa solvo estas envolvi la enhavon de via elemento en a <div>kun la klaso.
Transdonante signifon al helpaj teknologioj
Uzi koloron por aldoni signifon nur provizas vidan indikon, kiu ne estos transdonita al uzantoj de helpaj teknologioj - kiel ekranlegiloj. Certigu, ke informoj indikitaj per la koloro estas aŭ evidenta de la enhavo mem (ekz. la videbla teksto), aŭ estas inkluzivita per alternativaj rimedoj, kiel aldona teksto kaŝita kun la .sr-onlyklaso.