Bootstrap 5 Text/Typesetting

Bootstrap 5 默认设置

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

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

<h1> - <h6>

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

Voorbeeld

Probeer het zelf uit

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

Voorbeeld

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

Probeer het zelf uit

display 标题

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

Voorbeeld

Probeer het zelf uit

<small>

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

Voorbeeld

Probeer het zelf uit

<mark>

Bootstrap 5 zal een gele achtergrondkleur en enige binnenmarge gebruiken om in te stellen <mark> en .mark instellen via de volgende manier:

Voorbeeld

Probeer het zelf uit

<abbr>

Bootstrap 5 zal de stijl van HTML <abbr> element in met een onderbroken lijnstijl aan de onderkant en een vraagteken cursor bij hover:

Voorbeeld

Probeer het zelf uit

<blockquote>

. Als je een inhoudsblock van een andere bron citeert, stel dan de stijl van het .blockquote Class toevoegen aan <blockquote>. Als je de herkomst van een naam moet noemen, zoals "van de website van de World Wildlife Fund", gebruik dan .blockquote-footer Class:

Voorbeeld

Probeer het zelf uit

<dl>

Bootstrap 5 zal HTML instellen via de volgende manier: <dl> Stijl van elementen:

Voorbeeld

Probeer het zelf uit

<code>

Bootstrap 5 zal HTML instellen via de volgende manier: <code> Stijl van elementen:

Voorbeeld

Probeer het zelf uit

<kbd>

Bootstrap 5 zal HTML instellen via de volgende manier: <kbd> Stijl van elementen:

Voorbeeld

Probeer het zelf uit

<pre>

Bootstrap 5 zal HTML instellen via de volgende manier: <pre> Stijl van elementen:

Voorbeeld

Probeer het zelf uit

Meer opmaak classes

De volgende Bootstrap 5 classes kunnen verder worden toegevoegd aan de stijl van HTML-elementen:

Class Beschrijving Voorbeeld
.lead Benadruk paragrafen. Probeer het uit
.text-left Stel tekst in die links uitgelijnd is. Probeer het uit
.text-break Voorkom dat lange teksten de lay-out verstoren. Probeer het uit
.text-center Stel tekst in die centraal uitgelijnd is. Probeer het uit
.text-decoration-none Verwijder de onderstreping van koppelingen. Probeer het uit
.text-end Stel tekst in die rechts uitgelijnd is. Probeer het uit
.text-nowrap Stel tekst in die niet doorgebroken wordt. Probeer het uit
.text-lowercase Stel kleine letters in. Probeer het uit
.text-uppercase Stel hoofdletters in. Probeer het uit
.text-capitalize Stel hoofdletters in. Probeer het uit
.initialism Toon tekst in <abbr> elementen met een iets kleinere lettergrootte. Probeer het uit
.list-unstyled Verwijder de standaard list-style en linker buitenmarge van lijstitems (van toepassing op <ul> en <ol>).
Dit geldt alleen voor directe nakomelingen van lijstitems.
Als je de standaard lijststijl wilt verwijderen van elke geneste lijst, toepas dan ook dit op de geneste lijsten.		 Probeer het uit
.list-inline Plaats alle lijstitems op een rij.
Gebruik samen met elke <li> element van .list-inline-item.		 Probeer het uit