werna-werna
Nerangake makna liwat werna kanthi sawetara kelas sarana warna. Kalebu dhukungan kanggo tautan gaya karo status hover.
Dealing with specificity
Kadhangkala kelas kontekstual ora bisa ditrapake amarga kekhususan pamilih liyane. Ing sawetara kasus, solusi sing cukup yaiku mbungkus konten unsur sampeyan <div>ing kelas.
Nuduhake makna kanggo teknologi assistive
Nggunakake warna kanggo nambah makna mung menehi indikasi visual, sing ora bakal dikirim menyang pangguna teknologi bantu - kayata pembaca layar. Priksa manawa informasi sing dituduhake kanthi warna katon jelas saka isi kasebut (umpamane teks sing katon), utawa kalebu liwat cara alternatif, kayata teks tambahan sing didhelikake karo .sr-onlykelas.
warna
.teks-utama
.teks-sekunder
.teks-sukses
.teks-bebaya
.text-warning
.teks-info
.teks-lampu
.teks-peteng
.teks-awak
.text-muted
.teks-putih
.teks-ireng-50
.teks-putih-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>Kelas teks kontekstual uga bisa digunakake ing jangkar kanthi status hover lan fokus sing kasedhiya. Elinga yen kelas .text-whitelan .text-mutedora duwe gaya link tambahan ngluwihi garis ngisor.
<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>Werna latar mburi
Kaya karo kelas warna teks kontekstual, gampang nyetel latar mburi unsur menyang kelas kontekstual apa wae. Komponen jangkar bakal dadi peteng nalika hover, kaya kelas teks. Utilitas latar mburi ora disetelcolor , dadi ing sawetara kasus sampeyan pengin nggunakake .text-*utilitas.
<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>Gradien latar mburi
Nalika $enable-gradientsdisetel kanggo true(standar punika false), sampeyan bisa nggunakake .bg-gradient-kelas sarana. Sinau babagan opsi Sass kanggo ngaktifake kelas kasebut lan liya-liyane.
.bg-gradient-primary.bg-gradient-secondary.bg-gradient-success.bg-gradient-danger.bg-gradient-warning.bg-gradient-info.bg-gradient-light.bg-gradient-dark