Bootstrap 4 Farben


Textfarben

Bootstrap 4 verfügt über einige kontextabhängige Klassen, die verwendet werden können, um "Bedeutung durch Farben" bereitzustellen.

Die Klassen für Textfarben sind: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body(Standard-Körperfarbe/häufig schwarz) und .text-light:

Beispiel

This text is muted.

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary text.

Dark grey text.

Body text.

Light grey text.

Kontextuelle Textklassen können auch für Links verwendet werden, wodurch eine dunklere Hover-Farbe hinzugefügt wird:

Sie können mit den Klassen .text-black-50oder auch 50 % Deckkraft für schwarzen oder weißen Text hinzufügen :.text-white-50

Beispiel

Black text with 50% opacity on white background

White text with 50% opacity on black background


Hintergrundfarben

Die Klassen für Hintergrundfarben sind: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-darkund .bg-light.

Beachten Sie, dass Hintergrundfarben nicht die Textfarbe festlegen, sodass Sie sie in einigen Fällen zusammen mit einer .text-*Klasse verwenden möchten.

Beispiel

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary background color.

Dark grey background color.

Light grey background color.