Litir
Komdu merkingu á framfæri í gegnum lit með handfylli af litaforritum. Inniheldur stuðning við stíltengla með sveimastöðu líka.
.texta-aðal
.texta-efri
.texta-árangur
.texta-hætta
.textaviðvörun
.textaupplýsingar
.texta-ljós
.texta-dökkur
.textamál
.textaþaggað
.texti-hvítur
.texti-svartur-50
.texti-hvítur-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>Samhengistextatímar virka einnig vel á akkeri með tilgreindum sveima- og fókusstöðu. Athugaðu að .text-whiteog .text-mutedflokkurinn hefur enga viðbótarútgáfu tengla umfram undirstrikun.
<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>Svipað og í samhengistextalitaflokkum, stilltu bakgrunn frumefnis auðveldlega á hvaða samhengisflokka sem er. Akkerihlutir verða dökkir þegar þeir eru á sveimi, alveg eins og textaflokkarnir. Bakgrunnsforrit stilla ekkicolor , þannig að í sumum tilfellum þarftu að nota .text-*tól.
<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>Þegar $enable-gradientser stillt á satt, muntu geta notað .bg-gradient-gagnsemisflokka. Sjálfgefið $enable-gradientser óvirkt og dæmið hér að neðan er viljandi bilað. Þetta er gert til að auðvelda aðlögun frá því augnabliki sem þú byrjar að nota Bootstrap. Lærðu um Sass valkosti okkar til að virkja þessa flokka og fleira.
<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>Að takast á við sérhæfni
Stundum er ekki hægt að nota samhengisflokka vegna sérstöðu annars veljara. Í sumum tilfellum er nægileg lausn að vefja efni þáttarins inn í <div>með bekknum.
Að miðla merkingu til hjálpartækja
Notkun lita til að bæta við merkingu gefur aðeins sjónræna vísbendingu, sem verður ekki miðlað til notenda hjálpartækni - eins og skjálesara. Gakktu úr skugga um að upplýsingar sem merktar eru með litnum séu annaðhvort augljósar af innihaldinu sjálfu (td sýnilegum texta), eða séu innifaldar með öðrum hætti, svo sem viðbótartexta sem er falinn í .sr-onlybekknum.