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