Krāsas
Norādiet nozīmi, izmantojot krāsu, izmantojot dažas krāsu lietderības klases. Ietver atbalstu arī saišu veidošanai ar kursora novietošanas stāvokļiem.
Krāsa
.text-primary
.teksts-sekundārais
.teksts-veiksmi
.teksts-bīstamība
.text-warning
.text-info
.text-light
.text-tumšs
.text-body
.text-muted
.text-white
.text-black-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>Kontekstuālā teksta klases labi darbojas arī enkuros ar nodrošinātajiem kursora novietošanas un fokusa stāvokļiem. Ņemiet vērā, ka .text-whiteun .text-mutedklasei nav papildu saites stila, izņemot pasvītrojumu.
<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>Fona krāsa
Līdzīgi kā kontekstuālā teksta krāsu klasēs, elementa fonu var viegli iestatīt uz jebkuru kontekstuālo klasi. Enkura komponenti kļūs tumšāki, virzot kursoru, tāpat kā teksta klases. Fona utilītas netiek iestatītascolor , tāpēc dažos gadījumos vēlēsities izmantot .text-*utilītas.
<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>Fona gradients
Ja $enable-gradientsir iestatīts uz true(noklusējums ir false), varat izmantot .bg-gradient-utilītu klases. Uzziniet par mūsu Sass opcijām , lai iespējotu šīs nodarbības un daudz ko citu.
.bg-gradient-primary.bg-gradient-secondary.bg-gradient-success.bg-gradient-danger.bg-gradient-warning.bg-gradient-info.bg-gradient-light.bg-gradient-dark
Nodarbojas ar specifiku
Dažreiz kontekstuālās klases nevar lietot cita atlasītāja specifikas dēļ. Dažos gadījumos pietiekams risinājums ir iekļaut elementa saturu <div>klasē.
Nozīmes nodošana palīgtehnoloģijām
Krāsu izmantošana nozīmes pievienošanai nodrošina tikai vizuālu norādi, kas netiks nodota palīgtehnoloģiju lietotājiem, piemēram, ekrāna lasītājiem. Nodrošiniet, lai informācija, kas apzīmēta ar krāsu, būtu vai nu acīmredzama no paša satura (piemēram, redzamā teksta), vai arī tā ir iekļauta, izmantojot alternatīvus līdzekļus, piemēram, ar .sr-onlyklasi paslēptu papildu tekstu.