Tipografía

Documentación y ejemplos de tipografía Bootstrap, incluidos ajustes globales, encabezados, texto del cuerpo, listas y más.

Configuración global

Bootstrap establece estilos básicos de visualización, tipografía y enlaces globales. Cuando se necesita más control, consulte las clases de utilidades textuales .

Utilice una pila de fuentes nativa que seleccione la mejor font-familypara cada sistema operativo y dispositivo.
Para una escala de tipos más inclusiva y accesible, usamos la raíz predeterminada del navegador font-size(generalmente 16 px) para que los visitantes puedan personalizar los valores predeterminados de su navegador según sea necesario.
Usa los atributos $font-family-base, $font-size-basey $line-height-basecomo nuestra base tipográfica aplicada al <body>.
Establezca el color del enlace global a través de $link-colory aplique subrayados de enlace solo en :hover.
Úselo $body-bgpara establecer un background-coloren el <body>( #fffpor defecto).

Estos estilos se pueden encontrar dentro _reboot.scssde , y las variables globales se definen en _variables.scss. Asegúrese de $font-size-baseconfigurar rem.

encabezados

Todos los encabezados HTML, <h1>hasta <h6>, están disponibles.

Bóveda	Ejemplo
`<h1></h1>`	h1. Encabezado de arranque
`<h2></h2>`	h2. Encabezado de arranque
`<h3></h3>`	h3. Encabezado de arranque
`<h4></h4>`	h4. Encabezado de arranque
`<h5></h5>`	h5. Encabezado de arranque
`<h6></h6>`	h6. Encabezado de arranque

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

.h1Las .h6clases directas también están disponibles, para cuando desea hacer coincidir el estilo de fuente de un encabezado pero no puede usar el elemento HTML asociado.

h1. Encabezado de arranque

h2. Encabezado de arranque

h3. Encabezado de arranque

h4. Encabezado de arranque

h5. Encabezado de arranque

h6. Encabezado de arranque

<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

Personalización de encabezados

Utilice las clases de utilidad incluidas para recrear el pequeño texto de encabezado secundario de Bootstrap 3.

Encabezado de pantalla elegante Con texto secundario descolorido

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

Mostrar encabezados

Los elementos de encabezado tradicionales están diseñados para funcionar mejor en la carne del contenido de su página. Cuando necesite que un encabezado destaque, considere usar un encabezado de visualización , un estilo de encabezado más grande y un poco más obstinado. Tenga en cuenta que estos encabezados no responden de manera predeterminada, pero es posible habilitar tamaños de fuente receptivos .

Pantalla 1

Pantalla 2

Pantalla 3

Pantalla 4

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

Guiar

Haga que un párrafo se destaque agregando .lead.

Este es un párrafo principal. Se destaca de los párrafos regulares.

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

Elementos de texto en línea

Estilo para elementos HTML5 en línea comunes.

Puede utilizar la etiqueta de marca paradestacartexto.

~~Esta línea de texto debe tratarse como texto eliminado.~~

~~Ésta línea de texto se debe de considerar no correcta.~~

Esta línea de texto debe tratarse como una adición al documento.

Esta línea de texto aparecerá como subrayada

Esta línea de texto debe tratarse como letra pequeña.

Esta línea se muestra como texto en negrita.

Esta línea se muestra como texto en cursiva.

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

.marky .smalllas clases también están disponibles para aplicar los mismos estilos <mark>y <small>evitar cualquier implicación semántica no deseada que traerían las etiquetas.

Si bien no se muestra arriba, siéntase libre de usar <b>y <i>en HTML5. <b>está destinado a resaltar palabras o frases sin transmitir una importancia adicional, mientras que <i>es principalmente para voz, términos técnicos, etc.

Utilidades de texto

Cambie la alineación, la transformación, el estilo, el peso y el color del texto con nuestras utilidades de texto y utilidades de color .

abreviaturas

Implementación estilizada del <abbr>elemento HTML para abreviaturas y acrónimos para mostrar la versión ampliada al pasar el mouse. Las abreviaturas tienen un subrayado predeterminado y obtienen un cursor de ayuda para brindar contexto adicional al pasar el mouse por encima y para los usuarios de tecnologías de asistencia.

Agregue .initialisma una abreviatura para un tamaño de fuente ligeramente más pequeño.

atributo

HTML

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

cotizaciones en bloque

Para citar bloques de contenido de otra fuente dentro de su documento. Envuelva <blockquote class="blockquote">cualquier HTML como la cita.

Una cita conocida, contenida en un elemento blockquote.

<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>

Nombrar una fuente

Agregue un <footer class="blockquote-footer">para identificar la fuente. Envuelva el nombre del trabajo fuente en <cite>.

Una cita conocida, contenida en un elemento blockquote.

Alguien famoso en Título fuente

<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Alineación

Use las utilidades de texto según sea necesario para cambiar la alineación de su cita en bloque.

Una cita conocida, contenida en un elemento blockquote.

Alguien famoso en Título fuente

<blockquote class="blockquote text-center">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Una cita conocida, contenida en un elemento blockquote.

Alguien famoso en Título fuente

<blockquote class="blockquote text-right">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Liza

sin estilo

Elimine el margen predeterminado list-stylee izquierdo en los elementos de la lista (solo elementos secundarios inmediatos). Esto solo se aplica a los elementos de la lista de elementos secundarios inmediatos , lo que significa que también deberá agregar la clase para cualquier lista anidada.

Esta es una lista.
Parece completamente sin estilo.
Estructuralmente, sigue siendo una lista.
Sin embargo, este estilo solo se aplica a los elementos secundarios inmediatos.
Listas anidadas:
- no se ven afectados por este estilo
- seguirá mostrando una viñeta
- y tener el margen izquierdo apropiado
Esto todavía puede ser útil en algunas situaciones.

<ul class="list-unstyled">
  <li>This is a list.</li>
  <li>It appears completely unstyled.</li>
  <li>Structurally, it's still a list.</li>
  <li>However, this style only applies to immediate child elements.</li>
  <li>Nested lists:
    <ul>
      <li>are unaffected by this style</li>
      <li>will still show a bullet</li>
      <li>and have appropriate left margin</li>
    </ul>
  </li>
  <li>This may still come in handy in some situations.</li>
</ul>

En línea

Elimina las viñetas de una lista y aplica algo de luz margincon una combinación de dos clases, .list-inliney .list-inline-item.

Este es un elemento de la lista.
Y otro.
Pero se muestran en línea.

<ul class="list-inline">
  <li class="list-inline-item">This is a list item.</li>
  <li class="list-inline-item">And another one.</li>
  <li class="list-inline-item">But they're displayed inline.</li>
</ul>

Alineación de la lista de descripciones

Alinee términos y descripciones horizontalmente utilizando las clases predefinidas de nuestro sistema de cuadrícula (o mixins semánticos). Para términos más largos, opcionalmente puede agregar una .text-truncateclase para truncar el texto con puntos suspensivos.

Listas de descripción

Una lista de descripción es perfecta para definir términos.

Término

Definición del término.

Y algo más de texto de definición de marcador de posición.

Otro término

Esta definición es breve, por lo que no hay párrafos adicionales ni nada.

El término truncado está truncado

Esto puede ser útil cuando el espacio es reducido. Añade puntos suspensivos al final.

Anidamiento

Lista de definiciones anidadas: Escuché que te gustan las listas de definición. Déjame poner una lista de definiciones dentro de tu lista de definiciones.

<dl class="row">
  <dt class="col-sm-3">Description lists</dt>
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

  <dt class="col-sm-3">Term</dt>
  <dd class="col-sm-9">
    <p>Definition for the term.</p>
    <p>And some more placeholder definition text.</p>
  </dd>

  <dt class="col-sm-3">Another term</dt>
  <dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>

  <dt class="col-sm-3">Nesting</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Nested definition list</dt>
      <dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
    </dl>
  </dd>
</dl>

Tamaños de fuente receptivos

A partir de la versión 4.3.0, Bootstrap se entrega con la opción de habilitar tamaños de fuente receptivos, lo que permite que el texto se escale de forma más natural a través de dispositivos y tamaños de ventana gráfica. RFS se puede habilitar cambiando la $enable-responsive-font-sizesvariable Sass a truey recompilando Bootstrap.

Para admitir RFS , usamos un mixin Sass para reemplazar nuestras font-sizepropiedades normales. Los tamaños de fuente receptivos se compilarán en calc()funciones con una combinación de remunidades de ventana gráfica para habilitar el comportamiento de escalado receptivo. Puede encontrar más información sobre RFS y su configuración en su repositorio de GitHub .