Bootstrap 4 Text/Typography

Bootstrap 4 Standardeinstellungen

Bootstrap 4 verwendet eine Standardschriftgröße von 16 Pixel, und seine Zeilenhöhe beträgt 1,5.

Die Standardschriftfamilie ist "Helvetica Neue", Helvetica, Arial, Sans-Serif.

Darüber hinaus haben alle <p> -Elemente margin-top: 0 und margin-bottom: 1rem (standardmäßig 16px).

<h1> - <h6>

Bootstrap HTML-Überschriften (<h1> bis <h6>) haben alle bolder font-weight (fettere Schrift) und einer erhöhten Schriftgröße.

Beispiel

h1 Bootstrap Überschrift (2.5rem = 40px)

h2 Bootstrap Überschrift (2rem = 32px)

h3 Bootstrap Überschrift (1.75rem = 28px)

h4 Bootstrap Überschrift (1.5rem = 24px)

h5 Bootstrap Überschrift (1.25rem = 20px)
h6 Bootstrap Überschrift (1rem = 16px)

Display Überschriften

Display-Überschriften werden verwendet, um mehr als normale Überschriften hervorzuheben (größere Schriftgröße und dünere Schrift), und es stehen vier Klassen zur Auswahl: .display-1, .display-2, .display-3, .display-4

Beispiel

Display 1

Display 2

Display 3

Display 4

<small>

In Bootstrap 4 wird das HTML <small> -Element verwendet, um einen helleren, sekundären Text in jeder Überschrift zu erstellen:

Beispiel

h1 Überschrift secondärer Text

h2 Überschrift secondärer Text

h3 Überschrift secondärer Text

h4 Überschrift secondärer Text

h5 Überschrift secondärer Text
h6 Überschrift secondärer Text

<mark>

Bootstrap 4 formatiert das HTML-Element <mark> mit einer gelben Hintergrundfarbe und etwas Padding

Beispiel

Markieren Sie den Text mit dem mark-Element.

<abbr>

Bootstrap 4 formatiert das HTML <abbr> -Element mit einem gepunkteten Rahmen unten, der Curser erhält ein Fragezeichen beim überfahren mit der Maus

Beispiel

Die WHO wurde 1948 geründet

<p>Die <abbr title="World Health Organization">WHO</abbr> wurde 1948 geründet</p>

<blockquote>

Fügen Sie die .blockquote-Klasse zu einem <blockquote> hinzu, wenn Sie Inhaltsblöcke aus einer anderen Quelle angeben

Beispiel

Seit 50 Jahren schützt der WWF die Zukunft der Natur. Die weltweit führende Naturschutzorganisation WWF arbeitet in 100 Ländern und wird von 1,2 Millionen Mitgliedern in den Vereinigten Staaten und fast 5 Millionen weltweit unterstützt.

Von der WWF's website

<dl>

Bootstrap 4 formatiert das HTML <dl> -Element wie folgt

Beispiel

Kaffe
- schwarz heißes Getränk
Milch
- Weiß kaltes Getränk
<dl>
    <dt>Kaffe</dt>
    <dd>- schwarz heißes Getränk</dd>
    <dt>Milch</dt>
    <dd>- Weiß kaltes Getränk</dd>
</dl>

<code>

Bootstrap 4 formatiert das HTML <code> -Element folgendermaßen (Schriftfarbe rot)

Beispiel

The following HTML elements: span, section, and div defines a section in a document.

<kbd>

Bootstrap 4 formatiert das HTML-Element <kbd> auf die folgende Weise

Beispiel

Nutze ctrl + p zum öffnen der Print dialog Box.

<pre>

Bootstrap 4 formatiert das HTML-Element <pre> wie folgt:

Beispiel

Text in einem Pre-Element
wird in einer festen Breite angezeigt
Schriftart bleit erhalten
Absände und Leerzeichen bleiben erhalten
und Zeilenumbrüche ebendfals.

Eignet sich in verbindung mit <code> sehr gut zur Darstellung von HTM- und PHP- CSS-code.

Weitere Typografie-Klassen

Die folgenden Bootstrap 4-Klassen können zu HTML-Stilelementen hinzugefügt werden:

Class Description
.font-weight-bold Fetter Text
.font-italic Italic Text
.font-weight-light Leicht fetter Text
.font-weight-normal Normaler Text
.lead Lässt einen Absatz hervorstechen
.small Gibt kleineren Text an (auf 85% der Größe des übergeordneten Elements festgelegt)
.text-left linksbündiges Text
.text-*-left links ausgerichteter Text auf kleinen, mittleren, großen oder großen Bildschirmen
.text-center zentriert Text
.text-*-center zentriert Text on small, medium, large or xlarge screens
.text-right rechts ausgerichteter Text
.text-*-right rechts ausgerichteter Text auf kleinen, mittleren, großen oder großen Bildschirmen
.text-justify justified Text
.text-monospace Monospaced text
.text-nowrap Text kein Zeilenumbruch
.text-lowercase Indicates lowercased text
.text-uppercase Indicates uppercased text
.text-capitalize Zeigt kleingeschriebenen Text an
.initialism Zeigt den Text in einem an <abbr>-Element in einer etwas kleineren Schriftgröße
.list-unstyled Entfernt den Standard-Listenstil und den linken Rand für Listenelemente (funktioniert sowohl für < ul > und < ol > ). Diese Klasse gilt nur für Objekte mit unmittelbaren Kindlisten (um den Standardlistenstil aus verschachtelten Listen zu entfernen, wenden Sie diese Klasse auch auf verschachtelte Listen an)
.list-inline Platziert alle Listenelemente in einer einzelnen Zeile (zusammen mit . list-inline-item für jedes < li > Elemente)
.pre-scrollable Macht ein < pre > -Element scrollbar