Bootstrap 5 Tekst/Typografi

Bootstrap 5 默认设置

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

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

<h1> - <h6>

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

Eksempel

Prøv det selv

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

Eksempel

<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>

Prøv det selv

display 标题

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

Eksempel

Prøv det selv

<small>

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

Eksempel

Prøv det selv

<mark>

Bootstrap 5 vil bruge en gul baggrundsfarve og lidt indre margin til at indstille <mark> og .mark Stilen:

Eksempel

Prøv det selv

<abbr>

Bootstrap 5 vil indstille HTML <abbr> Elements stil til at have en buet kant nederst og en spørgsmålstegn-pil, der hænger, når den højdeslås:

Eksempel

Prøv det selv

<blockquote>

Når du citerer indhold fra andre kilder, skal du sætte .blockquote Klasse tilføjes til <blockquote>. Når du nævner en kilde, f.eks. "Fra World Wildlife Fund's hjemmeside", skal du bruge .blockquote-footer Klasse:

Eksempel

Prøv det selv

<dl>

Bootstrap 5 vil indstille HTML <dl> Elements stil:

Eksempel

Prøv det selv

<code>

Bootstrap 5 vil indstille HTML <code> Elements stil:

Eksempel

Prøv det selv

<kbd>

Bootstrap 5 vil indstille HTML <kbd> Elements stil:

Eksempel

Prøv det selv

<pre>

Bootstrap 5 vil indstille HTML <pre> Elements stil:

Eksempel

Prøv det selv

Flere layoutklasser

Følgende Bootstrap 5 klasser kan tilføjes yderligere til HTML-elementets stil:

Klasse Beskrivelse Eksempel
.lead Fremhæv afsnit. Prøv det
.text-left Definer tekst, der er justeret til venstre. Prøv det
.text-break Forhindr lang tekst i at ødelægge layoutet. Prøv det
.text-center Definer tekst, der er centreret. Prøv det
.text-decoration-none Fjern understregning i links. Prøv det
.text-end Definer tekst, der er justeret til højre. Prøv det
.text-nowrap Definer tekst, der ikke brydes over linjer. Prøv det
.text-lowercase Definer små bogstaver. Prøv det
.text-uppercase Definer store bogstaver. Prøv det
.text-capitalize Definer store bogstaver. Prøv det
.initialism Vis tekst inden for <abbr> elementer med en lidt mindre skrifttype. Prøv det
.list-unstyled Fjern standard listestil og venstre ekstern kant (tilgængelig for <ul> og <ol>).
Denne klasse er kun tilgængelig for direkte underlisteemner.
Hvis du vil fjerne standard listeudseende fra enhver indlejret liste, skal du også anvende dette på indlejrede lister.		 Prøv det
.list-inline Placer alle listeemner på en linje.
Brug sammen med hver <li> elementets .list-inline-item.		 Prøv det