Bootstrap - Typografie

Willkommen, zukünftige Web-Entwickler! Heute tauchen wir ein in die wundervolle Welt der Bootstrap-Typografie. Als Ihr freundlicher Nachbarschafts-EDV-Lehrer bin ich hier, um Sie auf dieser Reise mit vielen Beispielen, Erklärungen und vielleicht ein oder zwei Papa-Witzen zu begleiten. Also, los geht's!

Bootstrap Standard- / Globale Einstellungen

Bootstrap bringt einige Standard-Typografie-Einstellungen mit, die Ihre Texte direkt aus der Box gut aussehen lassen. Es ist, als hätten Sie einen persönlichen Stylisten für Ihre Website!

Hier ist ein einfaches Beispiel, wie Bootstrap Texte gestaltet:

<p>Dies ist ein von Bootstrap gestalteter Absatz.</p>

Vielleicht denken Sie: "Das sieht aus wie regulärer Text!" Und das stimmt! Aber Bootstrap hat einige subtile Verbesserungen vorgenommen. Es hat eine Standard-Schriftart (normalerweise eine Sans-Serif-Schriftart) festgelegt, eine komfortable Schriftgröße und eine angenehme Zeilenhöhe. Es sind diese kleinen Dinge, die Bootstrap so mächtig machen.

Überschriften

Überschriften in Bootstrap sind wie die verschiedenen Kaffee-Größen in Ihrem Lieblingscafé - sie gibt es in sechs Varianten, von h1 bis h6.

<h1>Dies ist eine Überschrift 1</h1>
<h2>Dies ist eine Überschrift 2</h2>
<h3>Dies ist eine Überschrift 3</h3>
<h4>Dies ist eine Überschrift 4</h4>
<h5>Dies ist eine Überschrift 5</h5>
<h6>Dies ist eine Überschrift 6</h6>

Jede Überschrift hat ihre eigene Größe und Dicke, was eine klare Hierarchie in Ihren Inhalten schafft. Es ist wie das Organisieren Ihres Schrankes - alles hat seinen Platz!

Anpassung von Überschriften

Was aber, wenn Sie die Stile von Überschriften verwenden möchten, ohne tatsächlich einen Überschriftentag zu verwenden? Bootstrap hat für Sie mit den Klassen .h1 bis .h6 vorgesorgt.

<p class="h1">Dieser Absatz sieht aus wie eine Überschrift 1</p>
<span class="h3">Dieser Span sieht aus wie eine Überschrift 3</span>

Dies ist großartig, wenn Sie das Aussehen einer Überschrift ohne die semantische Bedeutung wünschen. Es ist wie ein Smoking-Shirt tragen - elegant, aber nicht zu elegant.

Anzeigeverberschriften

Wenn reguläre Überschriften nicht ausreichen, bietet Bootstrap "Anzeigeverberschriften". Diese sind wie die Supermodels der Überschriften - groß, fett und auffällig.

<h1 class="display-1">Anzeige 1</h1>
<h1 class="display-2">Anzeige 2</h1>
<h1 class="display-3">Anzeige 3</h1>
<h1 class="display-4">Anzeige 4</h1>

Diese Anzeigeverberschriften sind perfekt für die Zeiten, wenn Sie eine große Aussage treffen müssen. Verwenden Sie sie klug, denn zu viele und Ihre Seite könnte anfangen zu schreien!

Einleitender Text

Die Klasse .lead ist Bootstrap's Möglichkeit, einen Absatz hervorzuheben. Es ist, als hätte Ihr Text eine Megaphone.

<p class="lead">Dies ist ein einleitender Absatz. Er hebt sich von den regulären Absätzen ab.</p>

Verwenden Sie dies für einführende Texte oder wichtige Informationen, die Sie hervorheben möchten.

Abkürzungen

Bootstrap gestaltet Abkürzungen und Akronyme mit einer gepunkteten Unterstreichung. Es ist, als gäben Sie Ihren Lesern einen geheimen Entschlüsselungsring!

<p>Die <abbr title="Weltgesundheitsorganisation">WHO</abbr> wurde 1948 gegründet.</p>

Bewegen Sie die Maus über die Abkürzung, und Sie werden den vollen Begriff sehen.

Zitat

Zitate in Bootstrap sind gestaltet, um sich von dem restlichen Text abzuheben. Sie sind wie die coolen Kids der Absätze.

<blockquote class="blockquote">
<p,Zwei Dinge sind unendlich: das Universum und die menschliche Dummheit; und ich bin mir nicht sicher über das Universum.</p>
</blockquote>

Nennung einer Quelle

Sie können eine Quelle zu Ihrem Zitat hinzufügen, indem Sie das <footer>-Tag mit der Klasse blockquote-footer verwenden.

<blockquote class="blockquote">
<p,Zwei Dinge sind unendlich: das Universum und die menschliche Dummheit; und ich bin mir nicht sicher über das Universum.</p>
<footer class="blockquote-footer">Albert Einstein</footer>
</blockquote>

Es ist, als gäben Sie Anerkennung, aber mit Stil!

Ausrichtung

Bootstrap ermöglicht es Ihnen, Ihren Text einfach auszurichten. Es ist, als ob Ihr Text tanzen lernt - links, zentriert, rechts!

<p class="text-left">Linksbündiger Text.</p>
<p class="text-center">Zentrierter Text.</p>
<p class="text-right">Rechtsbündiger Text.</p>

Inline-Textelemente

Bootstrap bietet Stile für verschiedene Inline-Textelemente. Es ist wie ein Schweizer Army Knife für Ihren Text!

Hier ist eine Tabelle der commonly verwendeten Inline-Textelemente:

Element	Beschreibung
<mark>	Hervorgehobener Text
<del>	Gelöschter Text
<s>	Durchgestrichener Text
<ins>	Eingeblendeter Text
<u>	Unterstrichener Text
<small>	Kleinere Text
<strong>	Fetter Text
<em>	Kursiver Text

Beispiel:

<p>Sie können diese Elemente verwenden, um Text zu <mark>hervorheben</mark>, zu <del>löschen</del>, <s>durchzustreichen</s>, <ins>einzufügen</ins>, <u>unterzustreichen</u>, <small>kleiner</small>, <strong>fett</strong> oder <em>kursiv</em> zu machen.</p>

Listen

Bootstrap gestaltet Listen, um sie visuell ansprechender zu gestalten. Es ist, als gäbe Ihre Listen ein Makeover!

<ul>
<li>Ungeordnete Liste Eintrag 1</li>
<li>Ungeordnete Liste Eintrag 2</li>
</ul>

<ol>
<li>Geordnete Liste Eintrag 1</li>
<li>Geordnete Liste Eintrag 2</li>
</ol>

Ausrichtung von Beschreibungslisten

Bootstrap ermöglicht es Ihnen, Begriffe und Beschreibungen in Beschreibungslisten auszurichten. Es ist wie das Organisieren eines Wörterbuchs, aber cooler!

<dl class="row">
<dt class="col-sm-3">Kaffee</dt>
<dd class="col-sm-9">Schwarzer heiße Getränk</dd>

<dt class="col-sm-3">Milch</dt>
<dd class="col-sm-9">Weißes kaltes Getränk</dd>
</dl>

Dies erstellt ein Zweispaltenlayout für Ihre Beschreibungsliste.

Responsive Schriftgrößen

Bootstrap 4 führte responsive Schriftgrößen ein. Es ist, als ob Ihr Text Yoga macht - er dehnt sich und passt sich an verschiedene Bildschirmgrößen an!

Um responsive Schriftgrößen zu aktivieren, fügen Sie diese Zeile in Ihre CSS-Datei ein:

html {
font-size: 1rem;
}

Dann verwenden Sie die Klasse .font-size-responsive auf Ihren Elementen:

<p class="font-size-responsive">Dieser Text wird seine Größe auf verschiedenen Geräten anpassen.</p>

Und das ist es, Leute! Ein umfassender Leitfaden zur Bootstrap-Typografie. Erinnern Sie sich daran, Typografie ist die Stimme Ihres Inhalts - lassen Sie sie singen! Frohes Coden, und mögen Ihre Websites immer toll aussehen!

Credits: Image by storyset