Bootstrap 5-Text/Formatierung

Bootstrap 5 默认设置

Bootstrap 5 默认 font-size 为 1rem（默认为 16px），line-height 为 1.5。

此外，所有 <p> 元素都设置了 margin-top: 0 und margin-bottom: 1rem （默认为 16px）。

<h1> - <h6>

Bootstrap 5 把 HTML 标题（<h1> 到 <h6>）的样式设置为有更粗的 font-weight 以及响应式的 font-size。

Beispiel

Probieren Sie es selbst aus

如果需要，您还可以在其他元素上使用 .h1 到 .h6 类，使它们表现为标题：

Beispiel

<p class="h1">h1 Bootstrap heading</p>
<p class="h2">h2 Bootstrap heading</p>
<p class="h3">h3 Bootstrap heading</p>
<p class="h4">h4 Bootstrap heading</p>
<p class="h5">h5 Bootstrap heading</p>
<p class="h6">h6 Bootstrap heading</p>

Probieren Sie es selbst aus

display 标题

display 标题用于比普通标题更突出（更大的 font-size 和更细的 font-weight），有六个类可供选择：.display-1 到 .display-6：

Beispiel

Probieren Sie es selbst aus

<small>

在 Bootstrap 5 中，HTML <small> 元素（和 .small （用于在任何标题中创建较小的辅助文本：

Beispiel

Probieren Sie es selbst aus

<mark>

Bootstrap 5 verwendet eine gelbe Hintergrundfarbe und einige Innenabstände, um zu stylen <mark> und .mark Stile:

Beispiel

Probieren Sie es selbst aus

<abbr>

Bootstrap 5 stellt HTML <abbr> Stile so, dass sie eine gestrichelte Unterseite und einen Cursor mit Fragezeichen bei der Mausüberfahrt haben:

Beispiel

Probieren Sie es selbst aus

<blockquote>

. Wenn Sie Inhalte aus anderen Quellen zitieren, setzen Sie .blockquote Klasse hinzufügen zu <blockquote>. Wenn Sie die Quelle eines Namens nennen, z.B. "Von der Website der Weltnaturschutzorganisation", verwenden Sie .blockquote-footer Klasse:

Beispiel

Probieren Sie es selbst aus

<dl>

Bootstrap 5 stellt HTML <dl> Stile des Elements:

Beispiel

Probieren Sie es selbst aus

<code>

Bootstrap 5 stellt HTML <code> Stile des Elements:

Beispiel

Probieren Sie es selbst aus

<kbd>

Bootstrap 5 stellt HTML <kbd> Stile des Elements:

Beispiel

Probieren Sie es selbst aus

<pre>

Bootstrap 5 stellt HTML <pre> Stile des Elements:

Beispiel

Probieren Sie es selbst aus

Mehr Formatierungsklassen

Die folgenden Bootstrap 5-Klassen können weiter zu den Stilen von HTML-Elementen hinzugefügt werden:

Klasse Beschreibung Beispiel
.lead Heben Sie Absätze hervor. Versuchen Sie es
.text-left Definieren Sie linksbündig ausgerichteten Text. Versuchen Sie es
.text-break Verhindern Sie, dass lange Texte das Layout stören. Versuchen Sie es
.text-center Definieren Sie zentriert ausgerichteten Text. Versuchen Sie es
.text-decoration-none Entfernen Sie den Unterstrich in Links. Versuchen Sie es
.text-end Definieren Sie Text, der rechtsbündig ist. Versuchen Sie es
.text-nowrap Definieren Sie Text, der nicht umgebrochen wird. Versuchen Sie es
.text-lowercase Definieren Sie Text in Kleinbuchstaben. Versuchen Sie es
.text-uppercase Definieren Sie Text in Großbuchstaben. Versuchen Sie es
.text-capitalize Definieren Sie Text in Großbuchstaben. Versuchen Sie es
.initialism Zeigen Sie den Text im <abbr>-Element in einer kleineren Schriftgröße an. Versuchen Sie es
.list-unstyled Entfernen Sie die Standard list-style und den linken Außenabstand der Listeinträge (gilt für <ul> und <ol>).
Diese Klasse ist nur für direkte Nachfolgerlisteinträge geeignet.
Falls Sie die Standardlisteinstellungen aus jeder eingebetteten Liste entfernen möchten, wenden Sie auch diese auf die eingebetteten Listen an.		 Versuchen Sie es
.list-inline Legen Sie alle Listeinträge in einer Zeile aus.
Verwenden Sie dies zusammen mit jeder <li>-Element auf .list-inline-item.		 Versuchen Sie es