Warna & latar mburi

Setel warna latar mburi kanthi warna latar ngarep sing kontras.

Ing kaca iki

Ringkesan

Ditambahake ing v5.2.0

Pembantu warna lan latar mburi nggabungake kekuwatan .text-*utilitas lan .bg-*utilitas ing siji kelas. Nggunakake fungsi Sass color-contrast(), kita kanthi otomatis nemtokake kontras colorkanggo background-color.

Kepala munggah! Saiki ora ana dhukungan kanggo color-contrastfungsi asli CSS, mula kita nggunakake dhewe liwat Sass. Iki tegese ngatur warna tema liwat variabel CSS bisa nyebabake masalah kontras warna karo utilitas kasebut.

Utama kanthi warna sing kontras

Sekunder kanthi warna kontras

Sukses kanthi warna sing kontras

Bebaya karo werna kontras

Warning karo werna kontras

Info karo werna kontras

Cahya kanthi warna sing kontras

Peteng kanthi warna sing 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>

Kanthi komponen

Gunakake ing panggonan gabungan .text-*lan .bg-*kelas, kaya ing lencana :

utami Info

html

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

Utawa ing kertu :

Header

Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.

Header

Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.

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>