Texto/Alinhamento Bootstrap 5

Bootstrap 5 默认设置

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

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

<h1> - <h6>

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

Exemplo

Experimente pessoalmente

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

Exemplo

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

Experimente pessoalmente

display 标题

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

Exemplo

Experimente pessoalmente

<small>

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

Exemplo

Experimente pessoalmente

Bootstrap 5 usará cor de fundo amarela e algumas margens internas para configurar

Bootstrap 5 将使用黄色背景颜色和一些内边距来设置 Bootstrap 5 usará cor de fundo amarela e algumas margens internas para configurar <mark> e .mark

Exemplo

Experimente pessoalmente

Bootstrap 5 configurará o estilo do HTML

do estilo: Bootstrap 5 configurará o estilo do HTML <abbr>

Exemplo

Experimente pessoalmente

<blockquote>

. Quando citar conteúdo de outras fontes, defina o estilo do elemento .blockquote Classe adicionada a <blockquote>. Quando nomear a origem, por exemplo, 'do site da Fundação Mundial da Natureza', use .blockquote-footer Classe:

Exemplo

Experimente pessoalmente

<dl>

Bootstrap 5 configurará o HTML <dl> Estilo do elemento:

Exemplo

Experimente pessoalmente

<code>

Bootstrap 5 configurará o HTML <code> Estilo do elemento:

Exemplo

Experimente pessoalmente

<kbd>

Bootstrap 5 configurará o HTML <kbd> Estilo do elemento:

Exemplo

Experimente pessoalmente

<pre>

Bootstrap 5 configurará o HTML <pre> Estilo do elemento:

Exemplo

Experimente pessoalmente

Mais classes de formatação

As classes Bootstrap 5 abaixo podem ser adicionadas ao estilo dos elementos HTML:

Classe Descrição Exemplo
.lead Destaca o parágrafo. Experimente
.text-left Define alinhamento de texto à esquerda. Experimente
.text-break Previene que longos textos destruam a disposição. Experimente
.text-center Define texto alinhado no centro. Experimente
.text-decoration-none Remove a sublinhada dos links. Experimente
.text-end Define alinhamento de texto à direita. Experimente
.text-nowrap Define texto sem quebra de linha. Experimente
.text-lowercase Define texto em minúsculas. Experimente
.text-uppercase Define texto em maiúsculas. Experimente
.text-capitalize Define texto em maiúsculas. Experimente
.initialism Exibe o texto dentro do <abbr> elemento com uma fonte ligeiramente menor. Experimente
.list-unstyled Remova o estilo de lista padrão e a margem esquerda externa dos itens da lista (aplicável a <ul> e <ol>).
Este estilo é aplicável apenas aos itens de sublistas diretas.
Se precisar remover o estilo de lista padrão de qualquer lista aninhada, aplique este estilo também às listas aninhadas.		 Experimente
.list-inline Coloque todos os itens da lista em uma linha.
Use com cada <li> elemento e .list-inline-item.		 Experimente