Textfarben und Hintergrundfarben Klassen in Bootstrap 5 | Erklärt

Farben sind eine großartige Möglichkeit, den auf einer Website angezeigten Inhalt eine Bedeutung zu bieten. Bootstrap 5 bietet ebenso wie die vorherigen Versionen auch verschiedene Klassen, um Elementen die Farbe und Hintergrundfarbe Farbe zu verleihen. Diese Klassen helfen bei der Generierung von Stylesheets mit weniger Codezeilen, die weitaus überschaubarer sind. Hier in diesem Beitrag werden wir verschiedene Bootstrap -5 -Klassen untersuchen, die mit Textfarbe und Hintergrundfarbe verknüpft sind.

Textfarbenklassen

Bootstrap 5 -Klassen, die mit Textfarben verknüpft sind. Diese Klassen werden als Farb -Dienstprogrammklassen bezeichnet und werden auch verwendet, um Links mit schwebenden Zuständen zu stylen.

Alle Klassen, die sich auf die Textfarbe beziehen, zusammen mit der Bedeutung, die diese vermitteln, werden hier erklärt.

.Text-Primary

Es gibt dem Text eine blaue Farbe und stellt ein wichtiges Textstück dar.

.Textsekundär

Es bietet dem Text eine graue Farbe und stellt sekundären Text dar.

.Text-Success

Diese Klasse verleiht dem Text eine grüne Farbe und repräsentiert den Erfolg.

.Textdanger

Wie der Name schon sagt, zeigt diese Klasse die Gefahr an und verleiht dem Text eine rote Farbe.

.Textwarnung

Es bietet eine gelbe Farbe für den Text und zeigt eine Warnung an.

.Text-Info

Diese Klasse wird verwendet, um eine Information darzustellen und dem Text einen helleren Blaufarbton zu verleihen.

.Textlicht

Es verleiht dem Text eine hellgraue Farbe.

.Textdark

Diese Klasse verleiht dem Text eine dunkelgraue Farbe.

.Textkörper

Es liefert den Körper des Textes, der standardmäßig schwarz ist.

.Text-MUTE

Es repräsentiert einen gedämpften Text und gibt ihm eine hellgraue Farbe.

.Text-Weiß

Wie der Name darstellt, bietet diese Klasse dem Text eine weiße Farbe.

Jetzt werden wir alle diese Farben in einem Beispiel demonstrieren, damit Sie lernen können, wie man sie benutzt.

Beispiel

Betrachten Sie das folgende Beispiel unten.

Html

Ein wichtiger Text

Text mit grauer Farbe.

Sieg

Achtung.

Warnung

Dies ist eine wichtige Information

Hallo Welt!

Dies ist ein dunkler Thementext

Das ist Körpertext

Dieser Text ist gedämpft

Dies ist ein Text mit weißer Farbe

Im obigen Code haben wir einfach mehrere erstellt

Elemente und zugewiesen jeden Absatz eine andere Textfarbeklasse.

Ausgang

Alle Textfarben wurden erfolgreich demonstriert.

Hinzufügen von Deckkraft zum Text

In Bootstrap 5 sind zwei Klassen zugeordnet, die dem Text Deckkraft verleihen. Diese werden unten erklärt.

.Text-Black-50

Dies stellt einen schwarz gefärbten Text mit einer Deckkraft von 50% mit einem weißen Hintergrund dar.

.Text-White-50

Dies ist ein weiß gefärbter Text mit 50% Deckkraft mit einem schwarzen Hintergrund.

Lassen Sie uns ein Beispiel sehen.

Beispiel

Im folgenden Beispiel fügen wir dem Text mit den oben genannten Klassen Deckkraft hinzu.

Html

Dieser Absatz hat eine schwarze Farbe, eine Deckkraft von 50% und einen weißen Hintergrund

Dieser Absatz hat eine weiße Farbe, 50% Deckkraft und einen schwarzen Hintergrund

Hier weisen wir beide Absätze eine andere Klasse zu, um dem in diesen Absätzen vorhandenen Text eine Opazität zu verleihen. Sie müssen auch bemerkt haben, dass in diesem Beispiel und im obigen Beispiel den Elementen mit einer Hintergrundfarbe eine schwarze Hintergrundfarbe gegeben haben. Die Hintergrund -Farbkurse in Bootstrap 5 wurden im kommenden Abschnitt erörtert.

Ausgang

Opazität wurde dem Text erfolgreich hinzugefügt.

Hintergrund -Farbkurse

Die Hintergrundfarben in Bootstrap 5 bieten den Elementen Farbe. Die Namen dieser Klassen ähneln den Textfarbenklassen der Textfarbe mit dem einzigen Unterschied, den das Präfix "BG" wird für die Klassen verwendet, die mit Hintergrundfarben verbunden sind.

Denken Sie daran, dass diese Klassen Elementen Hintergrundfarbe bieten, nicht dem Text. Alle mit der Hintergrundfarbe zugeordneten Klassen werden mit einem nachstehenden Beispiel erklärt.

Beispiel

Wenden Sie sich an das folgende Beispiel, um Hintergrundfarben in Bootstrap 5 zu verstehen.

Html

Ein wichtiger Text

Text mit grauer Farbe.

Sieg

Achtung.

Warnung

Dies ist eine wichtige Information

Hallo Welt!

Dies ist ein dunkler Thementext

Dies ist ein Text mit weißer Farbe

Im obigen Code haben wir mehrere Absätze erstellt und jeweils eine andere Hintergrundfarbe hinzugefügt.

Ausgang

Hintergrundfarben wurden erfolgreich zu den Absätzen hinzugefügt.

Abschluss

Farbkurse in Bootstrap 5 bieten dem Text Farbe und geben Sie eine bestimmte Bedeutung für den Text. In der Zwischenzeit bieten die mit der Hintergrundfarbe verbundenen Klassen den Hintergrund der Elemente Farbe. Mit Text und Hintergrund verknüpfte Klassen haben ähnliche Namen mit unterschiedlichen Präfixen. Für Textfarbenklassen ist das Präfix .Text-, In der Zwischenzeit ist das Präfix für Hintergrundfarben das Präfix .BG-. In diesem Beitrag werden alle Klassenkategorien ausführlich zusammen mit geeigneten Beispielen erörtert.