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.
.text-primary
.teksts-sekundārais
.teksts-veiksmi
.teksts-bīstamība
.text-warning
.text-info
.text-light
.text-tumšs
.text-muted
.text-white
<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>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 saišu stila.
<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>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>Ja $enable-gradientsir iestatīta vērtība True, varēsit izmantot .bg-gradient-utilīta klases. Pēc noklusējuma $enable-gradientsir atspējots, un tālāk redzamais piemērs ir apzināti bojāts. Tas tiek darīts, lai atvieglotu pielāgošanu no brīža, kad sākat lietot Bootstrap. Uzziniet par mūsu Sass opcijām , lai iespējotu šīs nodarbības un daudz ko citu.
<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>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.