werna-werna
Nerangake makna liwat werna kanthi sawetara kelas sarana warna. Kalebu dhukungan kanggo tautan gaya karo status hover.
.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>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>Nalika $enable-gradientsdisetel dadi bener, sampeyan bakal bisa nggunakake .bg-gradient-kelas sarana. Kanthi gawan, $enable-gradientsdipatèni lan conto ing ngisor iki sengaja rusak. Iki rampung kanggo kustomisasi luwih gampang wiwit sampeyan miwiti nggunakake Bootstrap. Sinau babagan opsi Sass kanggo ngaktifake kelas kasebut lan liya-liyane.
<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>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.