Värvid
Edastage tähendus läbi värvide käputäie värvikasutusklasside abil. Sisaldab ka hõljutusolekutega linkide kujundamise tuge.
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. .sr-onlyVeenduge, et värviga tähistatud teave oleks kas sisust endast ilmne (nt nähtav tekst) või kaasatud alternatiivsete vahenditega, näiteks klassiga peidetud lisatekst .
Värv
.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>Taustavärv
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>Tausta gradient
Kui $enable-gradientson seatud väärtusele true(vaikimisi on false), saate kasutada .bg-gradient-utiliidi klasse. Lugege meie Sassi valikute kohta nende klasside ja muu lubamiseks.
.bg-gradient-primary.bg-gradient-secondary.bg-gradient-success.bg-gradient-danger.bg-gradient-warning.bg-gradient-info.bg-gradient-light.bg-gradient-dark