Einführung in die Bootstrap-Typografie

Typografie ist eine der neuesten Funktionen von Bootstrap. Es wird insbesondere zum Stylen und Formatieren von Textelementen verwendet. Mithilfe der Typografiefunktion von Bootstrap kann eine Person Überschriften, Absätze, einige andere Inline-Elemente und Listen erstellen. Grundsätzlich verwendet bootstrap 1rem (16px) als Schriftgröße, einschließlich der verbleibenden Zeilenhöhe 5. Standardmäßig verwendet bootstrap die Schriftfamilie sans-serif Größe und Linienhöhe zum Erstellen von Rändern, Abständen usw.

Funktionen der Bootstrap-Typografie

Nachfolgend sind die verschiedenen Merkmale der Typografie aufgeführt:

1) Überschriften

HTML-Überschriften sind unterteilt in

zu

Bootstrap Richtung
angezeigt in Schriftgröße

Bootstrap Richtung

angezeigt in Schriftgröße

Bootstrap Richtung

angezeigt in Schriftgröße

Bootstrap Richtung

angezeigt in Schriftgröße
Bootstrap Richtung
angezeigt in Schriftgröße
Bootstrap Richtung
angezeigt in Schriftgröße

Durch die Verwendung von HTML-Code wird die folgende Ausgabe erzielt:

Unter Verwendung der Bootstrap-Typografie wurde sie mit den folgenden Klassen formatiert und formatiert:

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Die Ausgabe des obigen Codes unter Verwendung der Bootstrap-Typografie lautet wie folgt:

2) Responsive Überschriften

Responsive Überschriften sind eines der besten Dinge, die man mit Typografie entwerfen kann. Dies sind die Elemente, in denen der Text automatisch angepasst wird, indem die Klasse entsprechend der Gerätegröße angepasst wird. So kann man auf verschiedenen Geräten problemlos den gleichen Text in geeigneter Weise sehen.

Fügen Sie einfach die entsprechende Klasse wie folgt in Ihr Header-Tag ein:

Responsive Header

Es wird also ausgegeben als:

Responsive Header.

Sie können den gleichen Text auch auf den verschiedenen Geräten überprüfen und durch Ändern der Browsergröße Änderungen anzeigen.

3)

Dieses Tag wird verwendet, um leichteren, kleineren Sekundärtext in Ihrer Überschrift zu erstellen. Standardmäßig werden 85% der Größe der übergeordneten Überschrift festgelegt.

Beispiel:

Example heading secondary text

Ausgabe:

h5 Überschrift Sekundärtext

4)

Mit diesem Tag wird Text hervorgehoben.

Beispiel

Bootstrap Typography

Bootstrap Typography

Hiermit wird Text hervorgehoben.

5)

Dieses Tag wird verwendet, um eine Abkürzung zu markieren. Abkürzungen sind standardmäßig unterstrichen und mit einem Hilfecursor versehen, um zusätzlichen Kontext zum Schweben und für Benutzer von Hilfstechnologien bereitzustellen.

Beispiel:

Es gibt so viele Länder auf der Welt. Indien ist das beste Land

6)

Zeigt gelöschten Text an

Beispiel:

Mit diesem Tag wird gelöschter Text angezeigt.

Ausgabe:

Dieser Tag wird zum Anzeigen verwendet.

7)

Das blockquote-Element wird zum Präsentieren von Inhalten aus einer anderen Quelle verwendet.

Beispiel:

Blockquotes

Blockquotes

Das blockquote-Element wird zum Präsentieren von Inhalten aus einer anderen Quelle verwendet:


Es wird sehr wenig benötigt, um ein glückliches Leben zu führen. es ist alles in dir selbst, in deiner Art zu denken. Das Leben ist wie das Spielen einer Geige in der Öffentlichkeit und das Erlernen des Instruments, während man weitermacht.

Ausgabe:

Block Zitate
Das blockquote-Element wird zum Präsentieren von Inhalten aus einer anderen Quelle verwendet:

Es wird sehr wenig benötigt, um ein glückliches Leben zu führen. es ist alles in dir, in deiner Art zu denken. Das Leben ist, als würde man in der Öffentlichkeit Geige spielen und dabei das Instrument lernen.

8)
:

Mit diesem Tag wird eine Beschreibungsliste angezeigt.

Beispiel:

Das Element dl gibt eine Beschreibungsliste an:


Brot

- Weiß

- Braun

Kalte Getränke

- Pepsi

Ausgabe:

Das Element dl gibt eine Beschreibungsliste an:

Brot
Weiß
Braun
Kalte Getränke
Pepsi.

9)

Die Inline-Code-Anweisung sollte im Code-Element zusammengelegt werden.

Beispiel:

Die folgenden HTML-Elemente: span, section und div definieren einen Abschnitt in einem Dokument.

Ausgabe:

Die folgenden HTML-Elemente: span, section und div definieren einen Abschnitt in einem Dokument.

10) Kontextfarben

Dies ist nichts anderes als eine andere Klasse, die verwendet wird, um Bedeutung mit verschiedenen Farben zu vermitteln.
Es hat verschiedene Klassen wie .text-stummgeschaltet, .text-info, .text-primär, .text-Erfolg, .text-Warnung, .text-Gefahr.

Beispiel:

Verwenden Sie die Kontextklassen, um "Bedeutung durch Farben" bereitzustellen:

Dieser Text ist stummgeschaltet.

Dieser Text ist wichtig.

Dieser Text zeigt Erfolg an.

Dieser Text enthält einige Informationen.

Dieser Text ist eine Warnung.

Dieser Text stellt eine Gefahr dar.

Ausgabe:

Dieser Text ist stummgeschaltet.
Dieser Text ist wichtig.
Dieser Text zeigt Erfolg an.
Dieser Text enthält einige Informationen.
Dieser Text ist eine Warnung.
Dieser Text stellt eine Gefahr dar.

Wo können wir verwenden

  • Die meisten Webdesigner bevorzugen die Bootstrap-Typografie, um das Erscheinungsbild des Textformats zu verbessern.
  • Es wird insbesondere beim Stylen und Formatieren von Textinhalten verwendet.
  • Die meiste Zeit gibt es ein Problem in Bezug auf die Reaktionsfähigkeit von Texten. Die Textgröße variiert je nach Gerät. Daher werden diese Probleme mithilfe der Bootstrap-Typografiefunktion geklärt.
  • Bootstrap Typography kann auf einfache Weise angepasst werden, um es dem Endbenutzer attraktiv zu präsentieren.
  • Solche Textelemente auf einer Webseite werden über den Link zum Bootstrap 4-Stylesheet immer auf dieselbe Weise gerendert, außer dass diese Elemente von anderen Stilklassen überschrieben werden.
  • Der Bootstrap bietet Entwicklern praktische Typografiefunktionen, mit denen sie auf einfache Weise Überschriften, Absätze, Listen und andere Inline-Elemente erstellen können, die die Leser ansprechen würden.

Fazit

  • Nach allen Angaben in den obigen Inhalten sind die verschiedenen Typografiefunktionen von Bootstrap für Überschriften, Blockquote, Lead Text, Marked Text, Abkürzungen mit geeigneten Beispielen.
  • Solche robusten und hübschen Funktionen von Bootstrap machen es zu einem sehr beliebten und einzigartigen Front-End-Entwicklungsframework, das von vielen Organisationen häufig verwendet wird.
  • Der Bootstrap enthält alle Typografie-Tags, für die wir ein Styling wünschen, von einem Tag bis zu

    und die gesamte Überschriftenhierarchie.

Empfohlene Artikel

Dies ist eine Anleitung zur Bootstrap-Typografie. Hier werden verschiedene Funktionen der Bootstrap-Typografie wie Überschriften, Blockquoten, Abkürzungen, Markierungen usw. beschrieben. Weitere Informationen finden Sie auch in den folgenden Artikeln.

  • Bootstrap-Befehle
  • Bootstrap-Komponenten
  • So installieren Sie Bootstrap
  • Bootstrap-Layout

Kategorie:

Software-Entwicklung