Culoare și fundal

Setați o culoare de fundal cu culoare de prim plan contrastantă.

Pe aceasta pagina

Prezentare generală

Adăugat în v5.2.0

Ajutoarele de culoare și de fundal combină puterea .text-*utilităților și .bg-*utilităților noastre într-o singură clasă. Folosind funcția noastră Sass color-contrast(), determinăm automat un contrast colorpentru un anumit background-color.

Atenție! În prezent, nu există suport pentru o color-contrastfuncție nativă CSS, așa că o folosim pe a noastră prin Sass. Aceasta înseamnă că personalizarea culorilor temei noastre prin variabile CSS poate cauza probleme de contrast de culoare cu aceste utilitare.

Primar cu culoare contrastantă

Secundar cu culoare contrastantă

Succes cu culori contrastante

Pericol cu culoare contrastantă

Avertisment cu culoare contrastantă

Informații cu culoare contrastantă

Lumină cu culoare contrastantă

Întunecat cu culoare contrastantă

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>

Cu componente

Folosiți-le în locul claselor .text-*și combinate , ca pe insigne :.bg-*

Primar Info

html

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

Sau pe carduri :

Antet

Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.

Antet

Câteva exemple de text rapid care să se bazeze pe titlul cardului și să alcătuiască cea mai mare parte a conținutului cardului.

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>