Warna
Sampaikan makna melalui warna dengan segelintir kelas utiliti warna. Termasuk sokongan untuk penggayaan pautan dengan keadaan tuding juga.
Warna
.teks-utama
.teks-menengah
.teks-kejayaan
.teks-bahaya
.teks-amaran
.teks-maklumat
.teks-cahaya
.teks-gelap
.teks-badan
.teks diredam
.teks-putih
.teks-hitam-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 konteks juga berfungsi dengan baik pada sauh dengan keadaan tuding dan fokus yang disediakan. Ambil perhatian bahawa kelas .text-whitedan .text-mutedtidak mempunyai penggayaan pautan tambahan di luar garis bawah.
<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>Warna latar belakang
Sama seperti kelas warna teks kontekstual, tetapkan latar belakang elemen kepada mana-mana kelas kontekstual dengan mudah. Komponen anchor akan menjadi gelap pada tuding, sama seperti kelas teks. Utiliti latar belakang tidak ditetapkancolor , jadi dalam beberapa kes anda perlu menggunakan .text-*utiliti.
<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>Kecerunan latar belakang
Apabila $enable-gradientsditetapkan kepada true(lalai ialah false), anda boleh menggunakan .bg-gradient-kelas utiliti. Ketahui tentang pilihan Sass kami untuk mendayakan kelas ini dan banyak lagi.
.bg-gradient-primary.bg-gradient-secondary.bg-gradient-success.bg-gradient-danger.bg-gradient-warning.bg-gradient-info.bg-gradient-light.bg-gradient-dark
Berurusan dengan kekhususan
Kadangkala kelas kontekstual tidak boleh digunakan kerana kekhususan pemilih lain. Dalam sesetengah kes, penyelesaian yang mencukupi ialah membungkus kandungan elemen anda dalam a <div>dengan kelas.
Menyampaikan makna kepada teknologi bantuan
Menggunakan warna untuk menambah makna hanya memberikan petunjuk visual, yang tidak akan disampaikan kepada pengguna teknologi bantuan - seperti pembaca skrin. Pastikan maklumat yang dilambangkan dengan warna sama ada jelas daripada kandungan itu sendiri (cth teks yang boleh dilihat), atau disertakan melalui cara alternatif, seperti teks tambahan yang tersembunyi dengan .sr-onlykelas.