Saltar al contenido

Tipografía Bootstrap 5 – GeeksforGeeks

Screenshot20221113111203 Tipografía Bootstrap 5 - GeeksforGeeks

Mejorar artículo

Guardar artículo

Me gusta el artículo

Mejorar artículo

Guardar artículo

arranque 5 Tipografía es una característica de Bootstrap para diseñar y dar formato al contenido de texto. Se utiliza para crear encabezados personalizados, subtítulos en línea, listas y párrafos, alinearlos, agregar estilos de fuente más orientados al diseño y mucho más. Bootstrap admite configuraciones globales para la pila de fuentes, encabezados y estilos de enlaces para usar en la aplicación web para cada tipo de sistema operativo y dispositivo para proporcionar la mejor interfaz de usuario.

Tipografía Bootstrap 5:

  • Encabezados: Las clases están disponibles para la partida de [.h1 to .h6]. Las clases de encabezado nos ayudan a crear un encabezado de estilo de fuente sin el uso de etiquetas de encabezado HTML.
  • Mostrar títulos: Los encabezados de visualización se utilizan para crear un encabezado si tiene un tamaño más grande (tamaño de fuente más grande y fuente más clara) que un encabezado normal. Las clases para los encabezados de visualización son de .display-1 a .display-6.
  • Guiar: Para crear un párrafo que se destaque de otros párrafos .Plomo se utiliza la clase.
  • Elementos de texto en línea: Los elementos de texto en línea proporcionan un método para dar formato a los elementos HTML habituales. Por ejemplo: si queremos resaltar algún texto en el párrafo, podemos usar el usar etiqueta.
  • Utilidades de texto: Las herramientas de texto se utilizan para cambiar la alineación, el estilo, el peso, la altura de línea y otras decoraciones del texto.
  • Citas en bloque: los

    La etiqueta en HTML se usa para mostrar comillas largas (una sección citada de otra fuente). Cambia la alineación para que sea único de los demás. Contiene etiquetas de apertura y cierre.

  • liza: Este método se usa básicamente para formatear la lista agregada en la página web. Al usar este método, podemos eliminar los estilos predefinidos en las listas y agregar nuevos estilos.

Sintaxis:

<p class="Typography classes">
    ...
</p>

Ejemplo 1: Veamos un ejemplo de encabezados tipográficos.

HTML

<!DOCTYPE html>

<html>

<head>

    

    <link rel="stylesheet"

          href=

          crossorigin="anonymous">

</head>

 

<body class="m-5">

    <h1 class="text-success"> 

        GeeksforGeeks

    </h1>

    <h3>Bootstrap 5 Typography</h3>

 

    <div class="h6">GeeksforGeeks</div>

    <div class="h5">GeeksforGeeks</div>

    <div class="h4">GeeksforGeeks</div>

    <div class="h3">GeeksforGeeks</div>

    <div class="h2">GeeksforGeeks</div>

    <div class="h1">GeeksforGeeks</div>

</body>

</html>

Salida:

Screenshot20221113111203 Tipografía Bootstrap 5 - GeeksforGeeks

Ejemplo 2: Veamos un ejemplo de clases de encabezado de visualización.

HTML

<!DOCTYPE html>

<html>

<head>

    

    <link rel="stylesheet"

          href=

          crossorigin="anonymous">

</head>

 

<body class="m-5">

    <h1 class="text-success"> 

        GeeksforGeeks 

    </h1>

    <h3>Bootstrap5 Typography</h3>

    <p class="display-5">GFG 5</p>

    <p class="display-4">GFG 4</p>

    <p class="display-3">GFG 3</p>

    <p class="display-2">GFG 2</p>

    <p class="display-1">GFG 1</p>

</body>

</html>

Salida:

Screenshot20221113112022 Tipografía Bootstrap 5 - GeeksforGeeks

Referencia: https://getbootstrap.com/docs/5.0/content/typography/