Tipografía

Documentación y ejemplos de tipografía Bootstrap, incluida la configuración global, 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 necesite más control, consulte las clases de utilidad textual .

Utilice una pila de fuentes nativas que seleccione la mejor font-family para cada sistema operativo y dispositivo.
Para una escala de tipos más inclusiva y accesible, asumimos la raíz predeterminada del navegador font-size (generalmente 16px) para que los visitantes puedan personalizar los valores predeterminados de su navegador según sea necesario.
Utilice el $font-family-base , $font-size-base y $line-height-base atributos como nuestra base tipográfica aplicadas al <body> .
Establezca el color del enlace global mediante $link-color y aplique subrayados de enlace solo en :hover .
Use $body-bg para establecer a background-color en <body> ( #fff por defecto).

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

Encabezados

Todos los títulos HTML, <h1> hasta <h6> , están disponibles.

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

<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>

.h1 Las .h6 clases intermedias también están disponibles, para cuando desee hacer coincidir el estilo de fuente de un encabezado pero no puede usar el elemento HTML asociado.

h1. Encabezado de Bootstrap

h2. Encabezado de Bootstrap

h3. Encabezado de Bootstrap

h4. Encabezado de Bootstrap

h5. Encabezado de Bootstrap

h6. Encabezado de Bootstrap

<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 títulos

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

Encabezado de pantalla elegante con texto secundario difuminado

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

Mostrar títulos

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 se 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 forma 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>

Dirigir

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

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>

Elementos de texto en línea

Diseño de elementos HTML5 en línea comunes.

Puede utilizar la etiqueta de marca para realce texto.

~~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 se mostrará 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>

.mark y las .small clases también están disponibles para aplicar los mismos estilos <mark> y <small> evitando al mismo tiempo las implicaciones semánticas no deseadas que traerían las etiquetas.

Si bien no se muestra arriba, puede usarlo <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 grosor y el color del texto con nuestras utilidades de texto y de color .

Abreviaturas

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

Agréguelo .initialism a una abreviatura para un tamaño de fuente ligeramente más pequeño.

attr

HTML

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

Blockquotes

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Entero posuere erat a ante.

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Nombrar una fuente

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Entero posuere erat a ante.

Alguien famoso en el título fuente

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Alineación

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Entero posuere erat a ante.

Alguien famoso en el título fuente

<blockquote class="blockquote text-center">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Entero posuere erat a ante.

Alguien famoso en el título fuente

<blockquote class="blockquote text-right">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Liza

Sin estilo

Elimina el list-style margen izquierdo y predeterminado de los elementos de la lista (solo hijos inmediatos). Esto solo se aplica a los elementos de la lista de niños inmediatos , lo que significa que también deberá agregar la clase para las listas anidadas.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem en massa
Facilisis en pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Úlceras de purus sodales
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget portero lorem

<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

En línea

Elimine las viñetas de una lista y aplique algo de luz margin con una combinación de dos clases .list-inline y .list-inline-item .

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

Alineación de la lista de descripción

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

Listas de descripciones

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

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida en eget metus.

Porta Malesuada

Etiam porta sem malesuada magna mollis euismod.

El término truncado está truncado

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Anidamiento

Lista de definiciones anidadas: Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

<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">Euismod</dt>
  <dd class="col-sm-9">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</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">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

Tamaños de fuente receptivos

A partir de la v4.3.0, Bootstrap se envía con la opción de habilitar tamaños de fuente receptivos, lo que permite que el texto se escale de manera más natural en todos los tamaños de dispositivo y ventana gráfica. RFS se puede habilitar cambiando la $enable-responsive-font-sizes variable Sass true y volviendo a compilar Bootstrap.

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