Text Layout

Stopp Achtung
Achtung, diese Seite wurde für HTML 5 geschrieben. Scheinbar verwenden Sie einen alten Browser, der das nicht unterstützt. Es kann sein, dass nicht alle Seiten korrekt angezeigt werden. Sie sollten unbedingt eine aktuelle Version Ihres Browsers installieren.


Rechts die Überschriften <h1> bis <h6>

<h5> hat die Standard Schriftgröße von 14px

Die Angaben gelten nur für Bootstrap 3, bei Bootstrap 4 wurde 16px zum Standard und die Header wurden entsprechend vergrößert.

h1 Bootstrap Überschrift (36px)

h2 Bootstrap Überschrift (30px)

h3 Bootstrap Überschrift (24px)

h4 Bootstrap Überschrift (18px)

h5 Bootstrap Überschrift (14px)
h6 Bootstrap Überschrift (12px)
Text normal ist so und bei <small>wird er nicht merklich kleiner, sondern heller</small>, OK nicht gut erkennbar im Text

aber in der Überschrift <small>hier sichtbar kleiner</small> geworden


Das <mark> Element hinterlegt Text farbig.

Das <abbr> Element ist für Abkürzungen wie WMD. Maus über die gestrichtelte Abkürzung und man erfährt das Geheimnis, das als Attribut title im Element versteckt ist.

Das <blockquote> Element erlaubt, einem Text eine durch den <footer> eine etwas anders gestaltete Fußnote beizufügen.
das ist eine Fußnote

Texte mit Warnungen

alert alert-success alert-info alert-warning alert-danger

× Hurra! Ein Alert in einem anchor class=close fügt am Ende ein Close [X] hinzu.

Texte farblich hinterlegen

Text bg-primary.

Text bg-success.

Text bg-info.

Text bg-warning.

Text bg-danger.

Beschreibungen als Liste <dl> mit Typ <dt> und Description <dd>

Kaffee
- Macht munter
Milch
- für Babies

Ruby Annotation <ruby> mit Wert <rb> und Typ <rc>

10 31 2002 Month Day Year

Weitere Semantische Textelemente

<b> - Steht für einen Textabschnitt, der üblicherweise fettgedruckt dargestellt wird.

<bdi> - Bidirektionalen Formatierung (z.B. arabischer Text in von deutschsprachigen Inhalten)

<cite> - Steht für den Titel eines Werks.

<code> - Wird verwendet, um Programmiercode zu markieren.

<em> - Steht für hervorgehobenen Text.

<i> - Steht für einen Textabschnitt, der üblicherweise kursiv dargestellt wird

<kbd> - Keyboard - Steht für eine Benutzereingabe.

<label> -

<mark> - Steht für Text, der aus Referenzgründen hervorgehoben.

<q> - Bezeichnet ein Kurzzitat.

<s> - Nicht länger relevant oder akkurat.

<samp> - Markiert die Ausgabe eines Programms.

<small> - Steht für das Kleingedruckte

<span> - Markiert einen allgemeinen Textabschnitt.

<strong> - Besonders wichtiger Text.

<sub> - Markiert tiefgestellten Text.

<sup> - Markiert hochgestellten Text .

<time> -

<u> - Steht für einen Textabschnitt, der unterstrichen dargestellt wird.

<var> - Steht für eine Variable.

<wbr> - Gelegenheit für einen Zeilenumbruch

Ausrichtung von Texten

text-left: Links ausgerichteter Text.

text-center: Zentrierter Text.

text-right: Rechts ausgerichteter Text.

text-nowrap: Text ohne Umbruch. Nein, das wollen wir normalerweise doch nicht.

text-jusify: Blocksatz-Text, zum Testen brauchen wir mehr Text. In der Liga abgestürzt, im Europacup vor dem Totalschaden: Von einem Horror-Szenario will bei Bayer Leverkusen vor dem Gruppenfinale in der Champions League gegen Titelverteidiger FC Barcelona (ab 20.45 Uhr im n-tv.de Liveticker) aber trotz der seit Wochen anhaltenden Krise niemand etwas wissen. Stattdessen träumen die Verantwortlichen unter dem Werkskreuz von einem Weihnachts-Wunder gegen Messi und Co.

Textgrößen mittels Klassen

rr-no-font-size rr-font-size-medium

rr-font-size-xx-small rr-font-size-x-small rr-font-size-small

rr-font-size-large rr-font-size-x-large rr-font-size-xx-large

rr-font-small 0.85em rr-font-smaller 0.75em rr-font-smallest 0.65em

rr-font-big 1.2em rr-font-bigger 1.5em rr-font-biggest 2.0em