BOOTSTRAP-TEXT-Transform-Beispiel

Beim Erstellen einer Anwendung muss der Text für die Benutzer einfach und verständlich sein. Die Textfälle können auch das Erscheinungsbild der Anwendung beeinflussen. Der "TexttransformierungDie Eigenschaft in CSS wird verwendet, um anzugeben, wie der Text aktiviert werden kann. Es kann den gesamten Text in Großbuchstaben oder Kleinbuchstaben machen oder den ersten Buchstaben jedes Wortes aktivieren lassen. Insbesondere gibt es Klassen in Bootstrap, die die oben genannte Aufgabe ausführen.

In dieser Beschreibung wird beschrieben:

• Was ist Bootstrap-Eigenschaft "Text-Transformation"?
• So konvertieren Sie Text in Großbuchstaben mit Bootstrap?
• Wie Sie den ersten Charakter des Textes mit Bootstrap nutzen?
• So transformieren Sie Text in Kleinbuchstaben mit Bootstrap?

Was ist Bootstrap-Eigenschaft "Text-Transformation"?

In Bootstrap, die “Text-*"Klassen werden verwendet, um den Text zu transformieren, wo"*”Zeigt die Werte an“profitieren","Großbuchstaben", Und "Kleinbuchstaben”. Diese Werte werden entsprechend verwendet.

Für eine praktische Demonstration gehen Sie in den folgenden Abschnitten durch.

Methode 1: So konvertieren Sie Text in Großbuchstaben mit Bootstrap?

Bootstrap "Text-UppercaseDie Klasse wird verwendet, um jeden Buchstaben in Großbuchstaben zu verwandeln. Diese Klasse hat einen vordefinierten Stil, in dem die “Texttransformierung"Eigenschaft von CSS wird mit dem Wert festgelegt"Großbuchstaben”.

Beispiel

Fügen Sie zunächst einen Link zu Bootstrap -Dateien im Kopfabschnitt der HTML -Datei mit der "" Startstrap -Dateien hinzu "

Element in der Datei und zuweisen Sie sie die “Text-Uppercase" Klasse.

Html

Bootstrap "Text-Opper" -Klasse

Es kann beobachtet werden, dass der zusätzliche Text in alle Großbuchstaben umgewandelt wurde:

Methode 2: So zahlen Sie das erste Zeichen jedes Wortes mit Bootstrap an?

Bootstrap "TextkapitalDie Klasse macht das erste Charakterkapital jedes Wortes. Diese Klasse hat ein vordefiniertes Styling, bei dem die “Texttransformierung"Eigenschaft hat den Wert"profitieren”.

Beispiel

Füge hinzu ein "

Element in der HTML -Datei und zuweisen Sie sie die “Textkapital" Klasse.

Html

Bootstrap "Textkapital" -Klasse

Ausgang

Methode 3: So transformieren Sie Text in Kleinbuchstaben mit Bootstrap?

Bootstrap "Text-Lower-GehäuseDie Klasse wandelt jeden Buchstaben in Kleinbuchstaben um. Diese Klasse hat einen vordefinierten Stil, in dem das CSS “Texttransformierung"Eigenschaft wird mit dem Wert festgelegt"Kleinbuchstaben”.

Füge hinzu ein "

Element in der HTML -Datei und zuweisen Sie sie die “Text-Lower-Gehäuse" Klasse.

Html

Bootstrap "Text-niedriger" Klasse

Ausgang

Das ging darum, den Text in Bootstrap zu verwandeln.

Abschluss

In Bootstrap erfolgt die Texttransformation durch die Verwendung der “Textkapital","Text-Uppercase", Und "Text-Lower-Gehäuse" Klassen. Fügen Sie dazu den Text zuerst der HTML -Datei hinzu und weisen Sie dann das Element der gewünschten Klasse gemäß Ihrem Bedarf zu. Dieser Beitrag hat anhand von Beispielen erklärt, wie man Text in Bootstrap transformiert.