Arranque 4 | Tipografía

La tipografía es una característica de Bootstrap para diseñar y formatear el contenido del texto. Se utiliza para crear encabezados personalizados, subtítulos en línea, listas, párrafos, alinear, agregar más estilos de fuente orientados al diseño y mucho más. Bootstrap admite configuraciones globales para la pila de fuentes, encabezados y estilos de enlaces que se utilizarán en la aplicación web para cada tipo de sistema operativo y dispositivo para ofrecer la mejor interfaz de usuario.

La tipografía se puede utilizar para crear:

  • encabezados
  • subtítulos
  • Color de fuente de texto y párrafo, tipo de fuente y alineación
  • Liza
  • Otros elementos en línea

Etiquetas y clase para implementar la función de tipografía en bootstrap:

  • mostrar encabezados: se utiliza para crear mejores encabezados (tamaño de fuente más grande y peso de fuente más liviano). Existen cuatro clases en los encabezados de visualización que son .display-1, .display-2, .display-3 y .display-4.
  • plomo: Se utiliza para hacer que un párrafo se destaque, es decir, visualmente mejor.
  • marca: Se utiliza para resaltar el contenido del texto.
  • Inicialismo: se utiliza para representar abreviaturas en un tamaño de texto ligeramente pequeño.
  • blockquote: Se utiliza para citar el contenido del texto.
  • blockquote-footer: se utiliza para agregar los detalles del pie de página para identificar la fuente de la cotización.
  • text-center: Se utiliza para alinear el texto al centro.
  • list-inline: se utiliza para hacer que el elemento de la lista esté en línea.
  • text-truncate: Se utiliza para acortar el texto más largo truncándolo con puntos suspensivos.
  • text-muted: se utiliza para el color del texto, text-muted desvanece el texto, es decir, el texto queda atenuado.
  • text-uppercase: Se utiliza para transformar texto a mayúsculas.
  • text-lowercase: Se utiliza para transformar texto a minúsculas.
  • text-capitalize: Se utiliza para transformar el texto para poner en mayúscula la primera letra de cada palabra dejando las demás letras en minúsculas.
  • .font-weight-bold: Establece el peso de la fuente en negrita. Se utiliza para mostrar la importancia del texto.
  • .font-weight-bolder: Establece el peso de la fuente en negrita profunda. Se utiliza para mostrar la importancia del texto.
  • .font-italic: Establece el estilo de fuente en cursiva.
  • .font-weight-light: Establece el peso de la fuente en ligero.
  • .font-weight-lighter: Establece el peso de fuente más ligero.
  • .font-weight-normal: Establece el tamaño y peso normal de la fuente.
  • .lead: Destaca el párrafo.
  • .small: Se utiliza para crear subtítulos secundarios.
  • .text-left: Establece la alineación izquierda del texto.
  • .text-*-left: Establece la alineación izquierda del texto en todas las pantallas (pequeña, mediana, grande o extragrande).
  • .text-break: divide el texto de string larga en substrings de texto corto.

Ejemplo 1: este ejemplo utiliza la clase de encabezado para mostrar el encabezado.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Bootstrap Typography example
    </title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <h1>Heading Lists</h1>
        <h1 class="display-1">GeeksforGeeks</h1>
        <h1 class="display-2">GeeksforGeeks</h1>
        <h1 class="display-3">GeeksforGeeks</h1>
        <h1 class="display-4">GeeksforGeeks</h1>
    </div>
</body>
</html>

Producción:

Ejemplo 2: Este ejemplo usa la etiqueta <mark> para mostrar la importancia del texto.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Typography example</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <h1>GeeksforGeeks</h1>
         
<p>A <mark>computer science</mark>
            portal for geeks</p>
 
    </div>
</body>
</html>

Producción:


Navegador compatible:

  • Google Chrome
  • explorador de Internet
  • Firefox
  • Ópera
  • Safari

Publicación traducida automáticamente

Artículo escrito por Dharmendra_Kumar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *