Warna & latar belakang

Tetapkan warna latar belakang dengan warna latar depan yang kontras.

Pada halaman ini

Gambaran keseluruhan

Ditambah dalam v5.2.0

Pembantu warna dan latar belakang menggabungkan kuasa .text-*utiliti dan .bg-*utiliti kami dalam satu kelas. Menggunakan fungsi Sass kami color-contrast(), kami secara automatik menentukan kontras coloruntuk background-color.

Angkat kepala! Pada masa ini tiada sokongan untuk color-contrastfungsi asli CSS, jadi kami menggunakan fungsi kami sendiri melalui Sass. Ini bermakna menyesuaikan warna tema kami melalui pembolehubah CSS boleh menyebabkan isu kontras warna dengan utiliti ini.

Utama dengan warna kontras

Sekunder dengan warna kontras

Kejayaan dengan warna kontras

Bahaya dengan warna kontras

Amaran dengan warna kontras

Maklumat dengan warna kontras

Cahaya dengan warna yang kontras

Gelap dengan warna yang kontras

html

<div class="text-bg-primary p-3">Primary with contrasting color</div>
<div class="text-bg-secondary p-3">Secondary with contrasting color</div>
<div class="text-bg-success p-3">Success with contrasting color</div>
<div class="text-bg-danger p-3">Danger with contrasting color</div>
<div class="text-bg-warning p-3">Warning with contrasting color</div>
<div class="text-bg-info p-3">Info with contrasting color</div>
<div class="text-bg-light p-3">Light with contrasting color</div>
<div class="text-bg-dark p-3">Dark with contrasting color</div>

Dengan komponen

Gunakannya sebagai ganti gabungan .text-*dan .bg-*kelas, seperti pada lencana :

utama info

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-info">Info</span>

Atau pada kad :

Kepala

Beberapa teks contoh pantas untuk dibina pada tajuk kad dan membentuk sebahagian besar kandungan kad.

Kepala

Beberapa teks contoh pantas untuk dibina pada tajuk kad dan membentuk sebahagian besar kandungan kad.

html

<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>