Bootstrap 5 text/formatering

Bootstrap 5 默认设置

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

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

<h1> - <h6>

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

Exempel

Prova själv

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

Exempel

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

Prova själv

display 标题

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

Exempel

Prova själv

<small>

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

Exempel

Prova själv

<mark>

Bootstrap 5 kommer att använda en gul bakgrundsfärg och viss inneryta för att ställa in <mark> och .mark så här:

Exempel

Prova själv

<abbr>

Bootstrap 5 kommer att ställa in stilen för HTML <abbr> elementets stil till att ha en understruken kantbotten och en frågeteckenmarkör vid muspekarens övergång:

Exempel

Prova själv

<blockquote>

När du citerar innehåll från andra källor, sätt .blockquote Klass för att lägga till <blockquote>. När du nämner källan, till exempel "Från World Wildlife Fund:s webbplats", använd .blockquote-footer Klass:

Exempel

Prova själv

<dl>

Bootstrap 5 kommer att ställa in HTML <dl> Stilen för elementet:

Exempel

Prova själv

<code>

Bootstrap 5 kommer att ställa in HTML <code> Stilen för elementet:

Exempel

Prova själv

<kbd>

Bootstrap 5 kommer att ställa in HTML <kbd> Stilen för elementet:

Exempel

Prova själv

<pre>

Bootstrap 5 kommer att ställa in HTML <pre> Stilen för elementet:

Exempel

Prova själv

Mer typografiska klasser

Följande Bootstrap 5-klasser kan läggas till i stilen för HTML-element:

Klass Beskrivning Exempel
.lead Upplysning om stycke. Prova
.text-left Bestäm vänsterjusterad text. Prova
.text-break Förhindra att lång text förstör layouten. Prova
.text-center Bestäm centrerad text. Prova
.text-decoration-none Ta bort understrykning från länkar. Prova
.text-end Bestäm högerjusterad text. Prova
.text-nowrap Bestäm att text inte bryts över rader. Prova
.text-lowercase Bestäm små bokstäver. Prova
.text-uppercase Bestäm stora bokstäver. Prova
.text-capitalize Bestäm stora bokstäver. Prova
.initialism Visa text inom <abbr>-element i något mindre typsnitt. Prova
.list-unstyled Ta bort standard list-style och vänster sidomarginal (gäller för <ul> och <ol>).
Denna klass är endast tillämplig på direkt underordnade listobjekt.
Om du vill ta bort standardliststilen från någon inbäddad lista, tillämpa också detta på inbäddade listor.		 Prova
.list-inline Placera alla listor på en rad.
Används tillsammans med varje <li>-elementets .list-inline-item.		 Prova