Texto/mapeo Bootstrap 5

Bootstrap 5 默认设置

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

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

<h1> - <h6>

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

Ejemplo

Pruebe personalmente

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

Ejemplo

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

Pruebe personalmente

display 标题

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

Ejemplo

Pruebe personalmente

<small>

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

Ejemplo

Pruebe personalmente

<mark>

Bootstrap 5 utilizará un fondo de color amarillo y algunos márgenes internos para configurar <mark> y .mark de la siguiente manera:

Ejemplo

Pruebe personalmente

<abbr>

Bootstrap 5 configurará el estilo de HTML <abbr> para que tenga un borde inferior de línea punteada y un cursor de pregunta al pasar el ratón:

Ejemplo

Pruebe personalmente

<blockquote>

. Cuando se cite contenido de otro origen, configure el estilo del elemento .blockquote Añadir la clase <blockquote>. Cuando se nombra la fuente, por ejemplo, "Sitio web de la Fundación Mundial para la Naturaleza", utilice .blockquote-footer Clase:

Ejemplo

Pruebe personalmente

<dl>

Bootstrap 5 configurará HTML <dl> Estilo del elemento:

Ejemplo

Pruebe personalmente

<code>

Bootstrap 5 configurará HTML <code> Estilo del elemento:

Ejemplo

Pruebe personalmente

<kbd>

Bootstrap 5 configurará HTML <kbd> Estilo del elemento:

Ejemplo

Pruebe personalmente

<pre>

Bootstrap 5 configurará HTML <pre> Estilo del elemento:

Ejemplo

Pruebe personalmente

Más clases de alineación

Las clases de Bootstrap 5 a continuación se pueden agregar adicionalmente a los estilos de los elementos HTML:

Clase Descripción Ejemplo
.lead Resaltar párrafo. Intente
.text-left Especifique texto alineado a la izquierda. Intente
.text-break Evite que los textos largos rompan el diseño. Intente
.text-center Especifique texto alineado al centro. Intente
.text-decoration-none Elimine la subrayado de los enlaces. Intente
.text-end Especifique texto alineado a la derecha. Intente
.text-nowrap Especifique texto sin salto de línea. Intente
.text-lowercase Especifique texto en minúsculas. Intente
.text-uppercase Especifique texto en mayúsculas. Intente
.text-capitalize Especifique texto en mayúsculas. Intente
.initialism Muestre el texto dentro del elemento <abbr> con un tamaño de fuente más pequeño. Intente
.list-unstyled Elimine el estilo de lista predeterminado y el margen izquierdo externo de los elementos de lista (aplicable a <ul> y <ol>).
Este estilo solo se aplica a los elementos de lista hijos directos.
Si desea eliminar los estilos de lista predeterminados de cualquier lista anidada, también aplique este estilo a las listas anidadas.		 Intente
.list-inline Coloque todos los elementos de lista en una línea.
Utilícelo junto con cada elemento <li> en .list-inline-item.		 Intente