Värvid
Edastage tähendus läbi värvide käputäie värvikasutusklasside abil. Sisaldab ka hõljutusolekutega linkide kujundamise tuge.
.text-primary
.tekst-sekundaarne
.tekst-edu
.tekst-oht
.text-hoiatus
.text-info
.tekst-valgus
.tekst-tume
.text-body
.text-muted
.tekst-valge
.tekst-must-50
.text-white-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>Kontekstipõhised tekstiklassid töötavad hästi ka ankrutel, millel on hõljutus- ja fookusolekud. Pange tähele, et klassil .text-whiteja ei ole peale allajoonimise täiendavat lingi stiili..text-muted
<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>Sarnaselt kontekstuaalse teksti värviklassidega saate hõlpsalt määrata elemendi tausta mis tahes kontekstiklassi. Ankurkomponendid tumenevad hõljumisel, täpselt nagu tekstiklassid. Taustautiliite ei määratacolor , nii et mõnel juhul võiksite kasutada .text-*utiliite.
<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>Kui $enable-gradientsväärtuseks on määratud Tõene, saate kasutada .bg-gradient-utiliidiklasse. Vaikimisi $enable-gradientson keelatud ja allolev näide rikutakse tahtlikult. Seda tehakse lihtsamaks kohandamiseks alates hetkest, kui hakkate Bootstrapi kasutama. Lugege meie Sassi valikute kohta nende klasside ja muu lubamiseks.
<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>Konkreetsusega tegelemine
Mõnikord ei saa kontekstuaalseid klasse rakendada mõne teise valija spetsiifilisuse tõttu. Mõnel juhul on piisav lahendus elemendi sisu pakkimine <div>klassiga.
Abitehnoloogiate tähenduse edasiandmine
Värvi kasutamine tähenduse lisamiseks annab ainult visuaalse viite, mida ei edastata abitehnoloogiate (nt ekraanilugejate) kasutajatele. Veenduge, et värviga tähistatud teave oleks sisust endast ilmne (nt nähtav tekst) või kaasatud alternatiivsete vahenditega, näiteks .sr-onlyklassiga peidetud lisatekst.