Koloroj
Transdonu signifon per koloro per manpleno da koloraj utilaj klasoj. Inkluzivas ankaŭ subtenon por stilaj ligiloj kun ŝvebŝtatoj.
.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ŭ funkcias bone sur ankroj kun la provizitaj ŝvebado kaj fokuso ŝtatoj. Notu, ke la .text-whitekaj .text-mutedklaso ne 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>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>Kiam $enable-gradientsestas agordita al vera, vi povos uzi .bg-gradient-utilajn klasojn. Defaŭlte, $enable-gradientsestas malŝaltita kaj la suba ekzemplo estas intence rompita. Ĉi tio estas farita por pli facila personigo ekde la momento, kiam vi komencas uzi Bootstrap. Lernu pri niaj Sass-opcioj por ebligi ĉi tiujn klasojn kaj pli.
<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>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 <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ŭ evidentaj el la enhavo mem (ekz. la videbla teksto), aŭ estas inkluzivitaj per alternativaj rimedoj, kiel aldona teksto kaŝita kun la .sr-onlyklaso.