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, asumimos 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.

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.

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

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

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 fuente en <cite>.

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

Alguien famoso en 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

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

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.

Lorem ipsum dolor siéntate amet
Consectetur adipiscing elit
entero molestie lorem en massa
Facilisis en aliquet pretium nisl
nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat en
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor 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

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

lorem ipsum
Phasellus iaculis
Voluntad nulla

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

eusmod

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

Donec id elit non mi porta gravida at eget metus.

malesuada porta

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>

tipografía responsiva

La tipografía receptiva se refiere a escalar el texto y los componentes simplemente ajustando el elemento raíz font-sizedentro de una serie de consultas de medios. Bootstrap no hace esto por usted, pero es bastante fácil de agregar si lo necesita.

He aquí un ejemplo de ello en la práctica. Elija los correos font-sizeelectrónicos y las consultas de medios que desee.

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}