Die Typografie spielt eine wichtige Rolle, wenn es darum geht, die Aufmerksamkeit einer Benutzer auf sich zu ziehen. Im Webdesign bezieht sich die Typografie auf exquisites Stylen Ihres Textes, damit sie für das menschliche Auge attraktiv erscheint. Was sollte die Schriftgröße, Paarungen, Ausrichtung, Stil usw. sein. Alle werden unter die Begriffsartikographie gelangen?. Bootstrap 5 bietet verschiedene Klassen, mit denen Sie Ihren Text auf verschiedene Weise stylen können. In diesem Bericht werden diese Klassen im Detail erläutert.

Bootstrap 5 Überschriften

Sie können Überschriften in Bootstrap 5 mit dem erstellen

Zu

Tags genau wie in HTML. In Bootstrap 5 werden Sie jedoch feststellen, dass Überschriften eine andere Schriftfamilie haben als die, die nur mit HTML erstellt wurden. Darüber hinaus reagiert die Schriftgröße, was bedeutet, dass sie der Größe des Browserfensters ändert.

Beispiel

Dieses Beispiel zeigt Bootstrap 5 -Überschriften.

Html

Dies ist eine Überschrift

Dies ist eine Überschrift

Dies ist eine Überschrift

Dies ist eine Überschrift

Dies ist eine Überschrift

Dies ist eine Überschrift

Wir haben einfach einen DIV -Behälter erstellt und Überschriften von platziert

Zu

In diesem Behälter.

Ausgang

Bootstrap 5 -Überschriften wurden erfolgreich erstellt.

Übergangsklassen

Mit Bootstrap 5 lässt seine Benutzer andere Elemente wie Überschriften durch die Verwendung des .H1 Zu .H6 Klassen.

Beispiel

Angenommen, Sie möchten einen Absatz als Überschrift anzeigen und dann dem Code -Snippet unten folgen.

Html

Dies ist ein Absatz.

Dies ist ein Absatz.

Dies ist ein Absatz.

Dies ist ein Absatz.

Dies ist ein Absatz.

Dies ist ein Absatz.

Hier jeder der

Elemente haben eine andere Überschriftenklasse erhalten.

Ausgang

Die Absätze wurden unter Verwendung von Heading -Kursen gestaltet.

Klassen anzeigen

Wenn Sie Ihre Überschriften mit einem leichteren Schriftgewicht größer machen möchten, können Sie Ihre Überschriftenklassen zuweisen .Display-1 durch .Display-6.

Beispiel

So funktionieren diese Displaykurse.

Überschrift 1

Überschrift 2

Überschrift 3

Überschrift 4

Überschrift 5

Überschrift 6

Im obigen Code jeder

Das Element wurde eine andere Anzeigeklasse zugewiesen, um das Konzept dieser Klassen richtig zu demonstrieren.

Ausgang

Anzeigeklassen funktionieren ordnungsgemäß.

Kleine Klasse

Um einen bestimmten Teil eines Textes kleiner zu machen, die .klein Klasse oder die Element wird verwendet.

Beispiel

Nehmen wir an, Sie möchten einen bestimmten Textstück in Ihrer Überschrift kleiner und folgen Sie dann der folgenden Demonstration.

Html

Hallo Welt!

Hier wurde eine Überschrift erstellt und ein Teil der Überschrift wurde mit der Größe reduziert klein Klasse. Eine andere Sache, die Sie bemerken werden, ist, dass wir die Klasse benutzt haben .Text-Info dem Text eine bestimmte Farbe bereitstellen. Sie können Textfarben auf die gleiche Weise verwenden, um Ihre Elemente zu stylen.

Ausgang

Ein Teil der Überschrift wurde erfolgreich kleiner gemacht.

Markklasse

Wir möchten oft einen bestimmten Text hervorheben, damit es auffällt oder vielleicht die Aufmerksamkeit der Leser auf sich zieht. In Bootstrap 5 können Sie dies tun, indem Sie die verwenden .markieren Klasse oder die Element.

Beispiel

Lassen Sie uns einen Text hervorheben.

Html

Dieser Code -Snippet zeigt, wie es geht Markierenein Text.

Hier wurde das Element verwendet, um ein Stück des Absatzes hervorzuheben, das im obigen Code generiert wurde.

Ausgang

Der Text wurde hervorgehoben.

Blockquote -Klasse

Um Text aus anderen Quellen zu zitieren, verwenden Sie die .Blockquote Klasse in der

Element.

Beispiel

Angenommen, Sie möchten ein Sprichwort aus einer anderen Quelle zitieren.

Html

Einige sagen ..

Im obigen Code, um ein Sprichwort zu zitieren, haben wir das verwendet

Element und schrieben das Sprichwort in a

Element. Um die Quelle des Sprichworts zu nennen, verwenden wir die .Blockquote-Footer-Klasse im Tag.

Ausgang

Ein Sprichwort wurde erfolgreich zitiert.

Leitklasse

Um Ihre Absätze auszufallen, verwenden Sie die .führen Klasse in der

Element.

Beispiel

Im folgenden Beispiel vergleichen wir einen normalen Absatz mit einem Absatz mit einer Hauptklasse, um den Unterschied zwischen den beiden zu zeigen.

Html

Dies ist ein Absatz.

Dies ist ein weiterer Absatz.

Ausgang

Die Hauptklasse funktioniert ordnungsgemäß.

Einige andere Klassentypen zusammen mit ihren zugehörigen Klassen wurden in der folgenden Tabelle aufgeführt.

Klassentypen	Klassen	Beschreibung
Textausrichtung	.Textstart, .Text-Center, .Text-Ende	Text ausrichten.
Gerätebasierte Textausrichtung	.Text-SM/MD/LG/XL-Start/Center/Ende	Text basierend auf verschiedenen Gerätetypen auszurichten.
Texttransformation	.Text-Lower-Gehäuse, .Text-Uppercase, .Textkapital	Um den Fall des Textes zu transformieren.
Textfarbe	.Text-Primary, .Text-Info, .Text-Success, .Textsekundär, .Textwarnung, .Textdanger, .Text-MUTE	Text für Text zu liefern.
Textverpackung und Überlauf	.Textumbruch, .Text-Nowrap, .Textausbruch	Einen Text einwickeln oder ein langes Wort brechen.
Long Text abschneiden	.Textausdruck	Einen langen Text zu brechen.

Abschluss

Typografiekurse in Bootstrap 5 ermöglichen es seinen Benutzern, Text auf einer Website mit großer Bedeutung zu stylen. Diese Klassen verhindern ihre Benutzer daran, umfangreiche Stylesheets zu erstellen, damit die Anzahl der Codezeilen zu verringern und viel Zeit und Mühe zu speichern. In diesem Artikel wurden mit der Typografie in Bootstrap 5 verbundenen Klassen zusammen mit relevanten Beispielen demonstriert.