Source

Värvid

Edastage tähendus värvi kaudu, kasutades käputäie värvikasulikkuse klassisid. Sisaldab ka hõljutusolekutega linkide kujundamise tuge.

Värv

.text-primary

.tekst-sekundaarne

.tekst-edu

.tekst-oht

.text-hoiatus

.text-info

.tekst-valgus

.tekst-tume

.text-muted

.tekst-valge

<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-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>

Kontekstipõhised tekstiklassid töötavad hästi ka ankrutel, millel on hõljutus- ja fookusolekud. Pange tähele, et klassil .text-whiteja .text-mutedpole lingi stiili.

<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 kontekstipõhise 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.

.bg-primary

.bg-sekundaarne

.bg-edu

.bg-oht

.bg-hoiatus

.bg-info

.bg-light

.bg-tume

.bg-valge

<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>

Tausta gradient

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.

.bg-gradient-primary

.bg-gradient-sekundaarne

.bg-gradient-success

.bg-gradient-oht

.bg-gradient-warning

.bg-gradient-info

.bg-gradient-light

.bg-gradient-tume

<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.