warna
Sampaikan makna melalui warna dengan beberapa kelas utilitas warna. Termasuk dukungan untuk tautan gaya dengan status melayang juga.
Berurusan dengan kekhususan
Terkadang kelas kontekstual tidak dapat diterapkan karena kekhususan pemilih lain. Dalam beberapa kasus, solusi yang cukup adalah dengan membungkus konten elemen Anda <div>dengan kelas.
Menyampaikan makna pada teknologi bantu
Menggunakan warna untuk menambah makna hanya memberikan indikasi visual, yang tidak akan disampaikan kepada pengguna teknologi bantu – seperti pembaca layar. Pastikan bahwa informasi yang dilambangkan dengan warna jelas dari konten itu sendiri (misalnya teks yang terlihat), atau disertakan melalui cara alternatif, seperti teks tambahan yang disembunyikan dengan .sr-onlykelas.
Warna
.teks-utama
.teks-sekunder
.teks-sukses
.text-bahaya
.text-peringatan
.text-info
.text-light
.teks-gelap
.text-body
.text-dibungkam
.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 kontekstual juga bekerja dengan baik pada jangkar dengan status melayang dan fokus yang disediakan. Perhatikan bahwa kelas .text-whiteand .text-mutedtidak memiliki gaya tautan tambahan selain 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
Mirip dengan kelas warna teks kontekstual, atur latar belakang elemen dengan mudah ke kelas kontekstual apa pun. Komponen jangkar akan menjadi gelap saat diarahkan, seperti kelas teks. Utilitas latar belakang tidak disetelcolor , jadi dalam beberapa kasus Anda ingin menggunakan .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 belakang
Ketika $enable-gradientsdiatur ke true(default adalah false), Anda dapat menggunakan .bg-gradient-kelas utilitas. Pelajari tentang opsi Sass kami untuk mengaktifkan kelas ini dan lainnya.
.bg-gradient-primary.bg-gradient-secondary.bg-gradient-success.bg-gradient-danger.bg-gradient-warning.bg-gradient-info.bg-gradient-light.bg-gradient-dark