Introducción en la tipografía Bootstrap

La tipografía es una de las últimas características de bootstrap. Se utiliza especialmente para diseñar y formatear elementos de texto. Al usar la función de tipografía de bootstrap, alguien puede crear encabezados, párrafos, algunos otros elementos en línea y listas. Básicamente, bootstrap usa 1rem (16px) ya que el tamaño de fuente, incluida la altura de la línea, permanece 5. Por defecto, las familias de fuentes usadas por bootstrap son sans-serif, Arial, establece cómo se debe mostrar el contenido en el cuerpo, el color de fondo en el cuerpo, usa la fuente tamaño y altura de línea para crear márgenes, rellenos, etc.

Características de la tipografía Bootstrap

A continuación se muestran las diferentes características de la tipografía de la siguiente manera:

1) Encabezados

Los encabezados HTML se dividen en

a

Encabezado de Bootstrap
se muestra en tamaño de fuente

Encabezado de Bootstrap

se muestra en tamaño de fuente

Encabezado de Bootstrap

se muestra en tamaño de fuente

Encabezado de Bootstrap

se muestra en tamaño de fuente
Encabezado de Bootstrap
se muestra en tamaño de fuente
Encabezado de Bootstrap
se muestra en tamaño de fuente

Al usar el código HTML, da salida como se muestra a continuación:

Al usar la tipografía Bootstrap, se diseñó y formateó usando las clases respectivas como se muestra a continuación:

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

La salida del código anterior usando la tipografía Bootstrap es la siguiente:

2) Encabezados receptivos

Los encabezados receptivos son una de las mejores cosas que uno puede diseñar usando la tipografía. Estos son los elementos en los que el texto se ajusta automáticamente mediante el uso de la clase sensible según el tamaño del dispositivo. Por lo tanto, uno puede ver fácilmente el mismo texto de manera apropiada en diferentes dispositivos.

Simplemente agregue la clase sensible en su etiqueta de encabezado de la siguiente manera:

Responsive Header

Entonces mostrará salida como:

Encabezado receptivo.

Puede verificar el mismo texto en los diferentes dispositivos también, así como al cambiar el tamaño del navegador mostrará cambios.

3)

Esta etiqueta se utiliza para crear texto secundario más ligero y pequeño en su encabezado. De forma predeterminada, se establece en el 85% del tamaño del encabezado principal.

Ejemplo:

Example heading secondary text

Salida:

h5 encabezado texto secundario

4)

Esta etiqueta se usa para resaltar texto.

Ejemplo:

Bootstrap Typography

Bootstrap Typography

Esto se utiliza para resaltar texto.

5)

Esta etiqueta se usa para marcar una abreviatura. Las abreviaturas tienen un subrayado predeterminado y obtienen un cursor de ayuda para proporcionar un contexto adicional en el desplazamiento y para los usuarios de tecnologías de asistencia.

Ejemplo:

Hay tantos países en el mundo. India es el mejor país

6)

Indica texto eliminado

Ejemplo:

Esta etiqueta se usa para mostrar el texto eliminado.

Salida:

Esta etiqueta se usa para mostrar.

7)

El elemento blockquote se usa para presentar contenido de otra fuente.

Ejemplo:

Blockquotes

Blockquotes

El elemento blockquote se usa para presentar contenido de otra fuente:


Se necesita muy poco para hacer una vida feliz; todo está dentro de ti mismo, en tu forma de pensar. La vida es como tocar un violín en público y aprender el instrumento a medida que avanzas.

Salida:

Blockquotes
El elemento blockquote se usa para presentar contenido de otra fuente:

Se necesita muy poco para hacer una vida feliz; todo está dentro de ti, en tu forma de pensar. La vida es como tocar el violín en público y aprender el instrumento a medida que avanza.

8)
:

Esta etiqueta se usa para mostrar una lista de descripción.

Ejemplo:

El elemento dl indica una lista de descripción:


Un pan

- blanco

- Marrón

Bebidas frías

- Pepsi

Salida:

El elemento dl indica una lista de descripción:

Un pan
Blanco
marrón
Bebidas frías
Pepsi

9)

La declaración de código en línea debe agruparse en el elemento de código.

Ejemplo:

Los siguientes elementos HTML: span, section y div definen una sección en un documento.

Salida:

Los siguientes elementos HTML: span, section y div definen una sección en un documento.

10) colores contextuales

Esto no es más que una clase diferente que se usa para transmitir significado usando diferentes colores.
Tiene diferentes clases como .text-muted, .text-info, .text-primary, .text-success, .text-warning, .text-danger.

Ejemplo:

Utilice las clases contextuales para proporcionar "significado a través de colores":

Este texto está silenciado.

Este texto es importante.

Este texto indica éxito.

Este texto representa alguna información.

Este texto representa una advertencia.

Este texto representa peligro.

Salida:

Este texto está silenciado.
Este texto es importante.
Este texto indica éxito.
Este texto representa alguna información.
Este texto representa una advertencia.
Este texto representa peligro.

Donde podemos usar

  • La mayoría de los diseñadores web prefieren usar la tipografía bootstrap para una mejor apariencia del formato de texto.
  • Se usa especialmente al diseñar y formatear contenido de texto.
  • La mayoría de las veces hay un problema con respecto a la capacidad de respuesta del texto. El tamaño del texto varía según los diferentes dispositivos. Entonces, estos problemas se aclaran mediante el uso de la función de tipografía bootstrap.
  • La tipografía Bootstrap se personaliza de manera simple para presentarla de manera atractiva al usuario final.
  • Dichos elementos de texto en una página web siempre se mostrarán a través del enlace a la hoja de estilo Bootstrap 4 de la misma manera, excepto que estos elementos son anulados por otras clases de estilo.
  • Bootstrap proporciona a los desarrolladores características de tipografía convenientes para facilitarles la creación de encabezados, párrafos, listas y otros elementos en línea que resulten atractivos para los lectores.

Conclusión

  • De acuerdo con todos los detalles dados en el contenido anterior, las diferentes características de tipografía de Bootstrap para encabezados, comillas en bloque, Texto principal, Texto marcado, Abreviaturas con ejemplos adecuados.
  • Estas características robustas y bonitas de Bootstrap lo hacen un marco de desarrollo front-end muy popular y único que es ampliamente utilizado por muchas organizaciones.
  • El bootstrap viene con todas las etiquetas de tipografía para las que queremos diseñar, desde una etiqueta hasta

    y toda la jerarquía de encabezados.

Artículos recomendados

Esta es una guía de la tipografía Bootstrap. Aquí discutimos diferentes características de la tipografía Bootstrap, como encabezados, comillas, abreviaturas, marcas, etc. También puede consultar los siguientes artículos para obtener más información:

  • Comandos Bootstrap
  • Componentes de Bootstrap
  • Cómo instalar Bootstrap
  • Diseño de Bootstrap

Categoría:

Desarrollo de software