Warna & latar

Setel warna latar sareng warna latar hareup anu kontras.

Dina kaca ieu

Ihtisar

Ditambahkeun dina v5.2.0

Warna sareng latar tukang ngahijikeun kakuatan .text-*utilitas sareng .bg-*utilitas kami dina hiji kelas. Ngagunakeun fungsi Sass urang color-contrast(), urang otomatis nangtukeun kontras colorpikeun background-color.

Mastaka tegak! Ayeuna henteu aya dukungan pikeun color-contrastfungsi asli CSS, janten kami nganggo kami sorangan via Sass. Ieu ngandung harti yén nyaluyukeun warna téma urang ku variabel CSS tiasa nyababkeun masalah kontras warna sareng utilitas ieu.

Primer kalawan warna kontras

Sekundér kalawan warna kontras

Kasuksésan kalayan warna kontras

Bahaya kalayan warna kontras

Awas kalayan warna kontras

Info sareng warna kontras

Cahaya sareng warna kontras

Poék kalayan warna 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>

Kalawan komponén

Anggo aranjeunna pikeun ngagentos gabungan .text-*sareng .bg-*kelas, sapertos dina lencana :

primér Inpo

html

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

Atawa dina kartu :

lulugu

Sababaraha conto téks gancang pikeun ngawangun dina judul kartu sareng ngadamel seueur eusi kartu.

lulugu

Sababaraha conto téks gancang pikeun ngawangun dina judul kartu sareng ngadamel seueur eusi kartu.

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>