Barva in ozadje

Nastavite barvo ozadja s kontrastno barvo ospredja.

Na tej strani

Pregled

Dodano v v5.2.0

Pomočniki za barve in ozadje združujejo moč naših .text-*pripomočkov in .bg-*pripomočkov v enem razredu. Z uporabo naše funkcije Sass color-contrast()samodejno določimo kontrast colorza določen background-color.

Glavo pokonci! Trenutno ni podpore za izvorno color-contrastfunkcijo CSS, zato uporabljamo lastno prek Sassa. To pomeni, da lahko prilagajanje barv naše teme prek spremenljivk CSS povzroči težave z barvnim kontrastom s temi pripomočki.

Primarni s kontrastno barvo

Sekundarni s kontrastno barvo

Uspeh s kontrastno barvo

Nevarnost s kontrastno barvo

Opozorilo s kontrastno barvo

Informacije s kontrastno barvo

Svetloba s kontrastno barvo

Temno s kontrastno barvo

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>

S komponentami

Uporabite jih namesto kombiniranih .text-*in .bg-*razredov, kot na značkah :

Primarni Informacije

html

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

Ali na kartah :

Glava

Nekaj hitrih primerov besedila za nadgradnjo naslova kartice in sestavljanje večjega dela vsebine kartice.

Glava

Nekaj hitrih primerov besedila za nadgradnjo naslova kartice in sestavljanje večjega dela vsebine 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>