Texte/Typographie Bootstrap 5

Bootstrap 5 默认设置

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

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

<h1> - <h6>

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

Exemple

Essayez-le vous-même

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

Exemple

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

Essayez-le vous-même

display 标题

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

Exemple

Essayez-le vous-même

<small>

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

Exemple

Essayez-le vous-même

<mark>

Bootstrap 5 utilisera la couleur de fond jaune et certaines marges internes pour configurer <mark> et .mark de la manière suivante :

Exemple

Essayez-le vous-même

<abbr>

Bootstrap 5 configurera le style HTML <abbr> à une bordure en pointillés en bas et à une souris en forme de question lorsque vous passez la souris.

Exemple

Essayez-le vous-même

<blockquote>

Lorsque vous citez un contenu de bloc provenant d'une autre source, veuillez définir le style de l'élément .blockquote Ajoutez la classe <blockquote>Lorsque vous nommez l'origine, par exemple, "venant du site Web de la Fondation mondiale pour la nature", utilisez .blockquote-footer Classe :

Exemple

Essayez-le vous-même

<dl>

Bootstrap 5 configurera HTML de la manière suivante : <dl> Style de l'élément :

Exemple

Essayez-le vous-même

<code>

Bootstrap 5 configurera HTML de la manière suivante : <code> Style de l'élément :

Exemple

Essayez-le vous-même

<kbd>

Bootstrap 5 configurera HTML de la manière suivante : <kbd> Style de l'élément :

Exemple

Essayez-le vous-même

<pre>

Bootstrap 5 configurera HTML de la manière suivante : <pre> Style de l'élément :

Exemple

Essayez-le vous-même

Plus de classes de mise en page

Les classes suivantes de Bootstrap 5 peuvent être ajoutées supplémentairement aux styles des éléments HTML :

Classe Description Exemple
.lead Mettez en relief le paragraphe. Essayer
.text-left Définissez le texte aligné à gauche. Essayer
.text-break Prévenir que les textes longs détruisent la mise en page. Essayer
.text-center Définissez le texte centré. Essayer
.text-decoration-none Supprimez la soulignement des liens. Essayer
.text-end Définissez le texte aligné à droite. Essayer
.text-nowrap Définissez le texte sans retour chariot. Essayer
.text-lowercase Définissez le texte en minuscules. Essayer
.text-uppercase Définissez le texte en majuscules. Essayer
.text-capitalize Définissez le texte en majuscules. Essayer
.initialism Affichez le texte à l'intérieur de l'élément <abbr> en une petite police. Essayer
.list-unstyled Supprimez le style de liste par défaut et la marge extérieure gauche des éléments de liste (aplicable aux <ul> et <ol>).
Ce style ne s'applique qu'aux éléments de liste directs.
Pour supprimer les styles de liste par défaut de toute liste imbriquée, appliquez ce style également aux listes imbriquées.		 Essayer
.list-inline Placez tous les éléments de liste en une ligne.
Utilisez-le avec chaque élément <li> doté de .list-inline-item.		 Essayer