Kolor i tło

Ustaw kolor tła z kontrastującym kolorem pierwszego planu.

Na tej stronie

Przegląd

Dodano w wersji 5.2.0

Pomocnicy koloru i tła łączą moc naszych .text-*narzędzi i .bg-*narzędzi w jednej klasie. Korzystając z naszej color-contrast()funkcji Sass, automatycznie określamy kontrast colordla konkretnego background-color.

Heads-up! Obecnie nie ma wsparcia dla color-contrastfunkcji natywnej dla CSS, więc używamy własnej przez Sass. Oznacza to, że dostosowywanie kolorów motywu za pomocą zmiennych CSS może powodować problemy z kontrastem kolorów w tych narzędziach.

Podstawowy z kontrastowym kolorem

Wtórny z kontrastowym kolorem

Sukces z kontrastującym kolorem

Niebezpieczeństwo z kontrastowym kolorem

Ostrzeżenie z kontrastowym kolorem

Informacje w kontrastowym kolorze

Światło o kontrastowym kolorze

Ciemny z kontrastowym kolorem

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>

Z komponentami

Używaj ich zamiast kombinacji .text-*i .bg-*klas, jak na odznakach :

Podstawowy Informacje

html

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

Lub na kartach :

nagłówek

Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.

nagłówek

Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.

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>