Boja i pozadina

Postavite boju pozadine s kontrastnom bojom prednjeg plana.

Na ovoj stranici

Pregled

Dodano u v5.2.0

Pomoćnici boja i pozadine kombiniraju snagu naših .text-*uslužnih programa i .bg-*uslužnih programa u jednoj klasi. Koristeći našu Sass color-contrast()funkciju, automatski određujemo kontrast colorza određeni background-color.

Glavu gore! Trenutačno ne postoji podrška za izvornu CSS color-contrastfunkciju, pa koristimo vlastitu putem Sassa. To znači da prilagodba boja naše teme putem CSS varijabli može uzrokovati probleme s kontrastom boja s ovim uslužnim programima.

Primarni s kontrastnom bojom

Sekundarni s kontrastnom bojom

Uspjeh s kontrastnom bojom

Opasnost s kontrastnom bojom

Upozorenje s kontrastnom bojom

Info s kontrastnom bojom

Svjetlo s kontrastnom bojom

Tamno s kontrastnom bojom

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>

Sa komponentama

Koristite ih umjesto kombiniranih .text-*i .bg-*klasa, kao na značkama :

Primarni Info

html

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

Ili na karticama :

Zaglavlje

Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.

Zaglavlje

Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.

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>