Litir
Komdu merkingu á framfæri í gegnum lit með handfylli af litaforritum. Inniheldur stuðning við stíltengla með sveimastöðu líka.
Litur
.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>Bakgrunns litur
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>Bakgrunnshalli
Þegar $enable-gradientser stillt á true(sjálfgefið er false), geturðu notað .bg-gradient-tólaflokka. Lærðu um Sass valkosti okkar til að virkja þessa flokka og fleira.
.bg-gradient-primary.bg-gradient-secondary.bg-gradient-success.bg-gradient-danger.bg-gradient-warning.bg-gradient-info.bg-gradient-light.bg-gradient-dark
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 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 úr 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.