La tipografía juega un papel importante cuando se trata de captar la atención de los usuarios. En el diseño web, la tipografía se refiere a diseñar exquisitamente su texto para que parezca atractivo para el ojo humano. ¿Cuál debería ser el tamaño de la fuente, los emparejamientos, la alineación, el estilo, etc.?. Bootstrap 5 proporciona varias clases que lo ayudan a diseñar su texto de varias maneras. Este informe discute estas clases en detalle.

Bootstrap 5 encabezados

Puede crear encabezados en Bootstrap 5 usando el

a

Etiquetas como lo haces en html. Sin embargo, en Bootstrap 5, notará que los encabezados tienen una familia de fuentes diferente a la creada usando solo HTML. Además, el tamaño de la fuente responde, lo que significa que cambia correspondiente al tamaño de la ventana del navegador.

Ejemplo

Este ejemplo demuestra encabezados de bootstrap 5.

Html

Este es un encabezado

Este es un encabezado

Este es un encabezado

Este es un encabezado

Este es un encabezado

Este es un encabezado

Simplemente hemos creado un contenedor div y colocamos encabezados desde

a

dentro de ese contenedor.

Producción

Los encabezados de Bootstrap 5 se crearon con éxito.

Clases de encabezado

Bootstrap 5 permite a sus usuarios hacer que otros elementos parezcan encabezados a través del uso del .H1 a .H6 clases.

Ejemplo

Supongamos que desea mostrar un párrafo como encabezado, luego siga el fragmento de código a continuación.

Html

Este es un párrafo.

Este es un párrafo.

Este es un párrafo.

Este es un párrafo.

Este es un párrafo.

Este es un párrafo.

Aquí cada uno de los

Elementos ha recibido una clase de rumbo diferente.

Producción

Los párrafos fueron diseñados utilizando clases de encabezado.

Visualización de clases

Si desea hacer que sus encabezados sean más grandes con un peso de fuente más ligero, puede asignar sus clases de encabezados .pantalla-1 a través de .pantalla-6.

Ejemplo

Así es como funcionan estas clases de visualización.

Encabezado 1

Encabezado 2

Encabezado 3

Encabezado 4

Encabezado 5

Encabezado 6

En el código anterior, cada uno

El elemento se le ha asignado una clase de visualización diferente para demostrar el concepto de estas clases correctamente.

Producción

Las clases de visualización funcionan correctamente.

Clase pequeña

Con el propósito de hacer una parte más pequeña de un texto, el .pequeño clase o el se usa el elemento.

Ejemplo

Supongamos que desea un cierto texto en su encabezado más pequeño, luego siga la demostración a continuación.

Html

Hola Mundo!

Aquí se creó un encabezado y una parte del encabezado se redujo en tamaño utilizando el pequeño clase. Otra cosa que notará es que usamos la clase .info de texto Para proporcionar un cierto color al texto. Puede usar clases de color de texto de la misma manera para diseñar sus elementos.

Producción

Una parte del encabezado se hizo con éxito más pequeña.

Clase

A menudo queremos resaltar cierto texto para que se destaque o tal vez atraer la atención de los lectores. En Bootstrap 5 puedes hacerlo usando el .marca clase o el elemento.

Ejemplo

Destacemos un texto.

Html

Este fragmento de código muestra cómo destacarun texto.

Aquí el elemento se usó para resaltar una pieza del párrafo generado en el código anterior.

Producción

El texto fue resaltado.

Clase de bloques

Con el fin de citar el texto de otras fuentes, utilice el .bloqueo clase en el

elemento.

Ejemplo

Supongamos que desea citar un dicho de alguna otra fuente.

Html

Algunos dicen ..

En el código anterior, para citar un dicho, hemos usado el

elemento y escrito el dicho en un

elemento. Después, para nombrar la fuente del dicho, estamos usando el .Clase de Footer de Blockquote en la etiqueta.

Producción

Un dicho fue citado con éxito.

Clase principal

Para que sus párrafos se destaquen, use el .dirigir clase en el

elemento.

Ejemplo

En el siguiente ejemplo, estamos comparando un párrafo normal con un párrafo con una clase líder para mostrar la diferencia entre los dos.

Html

Este es un párrafo.

Este es otro párrafo.

Producción

La clase principal funciona correctamente.

Algunos otros tipos de clases junto con sus clases asociadas se han enumerado en la tabla a continuación.

Tipos de clases	Clases	Descripción
Alineación del texto	.inicio de texto, .centro de texto, .fin de texto	Para alinear el texto.
Alineación de texto basada en el dispositivo	.text-sm/md/lg/xl-start/center/end	Para alinear el texto basado en diferentes tipos de dispositivos.
Transformación del texto	.césped de texto, .soporte de texto, .Capitalización de texto	Para transformar el caso del texto.
Colorante de texto	.presente de texto, .info de texto, .titular de texto, .texto, .advertencia de texto, .amenazador de texto, .muutio	Para proporcionar color al texto.
Envoltura de texto y desbordamiento	.ajuste de texto, .hojas de texto, .ruptura de texto	Para envolver un texto o romper una palabra larga.
Texto largo truncando	.truncar el texto	Para romper un texto largo.

Conclusión

Las clases de tipografía en Bootstrap 5 permiten a sus usuarios diseñar texto que aparezca en un sitio web con gran facilidad. Estas clases evitan que sus usuarios realicen extensas hojas de estilo, reduciendo el número de líneas de código y ahorrando mucho tiempo y esfuerzo. Las clases asociadas con la tipografía en Bootstrap 5 se han demostrado en este artículo junto con ejemplos relevantes.