Farbe & Hintergrund

Legen Sie eine Hintergrundfarbe mit kontrastierender Vordergrundfarbe fest.

Auf dieser Seite

Überblick

Hinzugefügt in v5.2.0

Farb- und Hintergrundhelfer vereinen die Leistungsfähigkeit unserer .text-*Utilities und .bg-*Utilities in einer Klasse. Mit unserer Sass color-contrast()-Funktion ermitteln wir automatisch eine Kontrastierung colorfür eine bestimmte background-color.

Kopf hoch! Es gibt derzeit keine Unterstützung für eine CSS-native color-contrastFunktion, also verwenden wir unsere eigene via Sass. Dies bedeutet, dass das Anpassen unserer Designfarben über CSS-Variablen bei diesen Dienstprogrammen zu Farbkontrastproblemen führen kann.

Primär mit Kontrastfarbe

Sekundär mit Kontrastfarbe

Erfolg mit Kontrastfarbe

Gefahr mit Kontrastfarbe

Warnung mit Kontrastfarbe

Info mit Kontrastfarbe

Licht mit Kontrastfarbe

Dunkel mit Kontrastfarbe

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>

Mit Komponenten

Verwenden Sie sie anstelle von kombinierten .text-*und .bg-*Klassen, wie auf Abzeichen :

Primär Die Info

html

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

Oder auf Karten :

Header

Ein kurzer Beispieltext, der auf dem Kartentitel aufbaut und den Großteil des Inhalts der Karte ausmacht.

Header

Ein kurzer Beispieltext, der auf dem Kartentitel aufbaut und den Großteil des Inhalts der Karte ausmacht.

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>