Tipografía

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

En esta página

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

Pantalla 5

Pantalla 6

<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>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

Los encabezados de visualización se configuran a través del $display-font-sizesmapa Sass y dos variables, $display-font-weighty $display-line-height.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-weight: 300;
$display-line-height: $headings-line-height;

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>

Tenga en cuenta que esas etiquetas deben usarse con fines semánticos:

representa texto que está marcado o resaltado para fines de referencia o notación.
representa comentarios secundarios y letra pequeña, como derechos de autor y texto legal.
<s>representa elementos que ya no son relevantes o ya no son precisos.
representa un tramo de texto en línea que debe representarse de manera que indique que tiene una anotación no textual.

Si desea aplicar estilo a su texto, debe usar las siguientes clases en su lugar:

.markaplicará los mismos estilos que .
.smallaplicará los mismos estilos que .
.text-decoration-underlineaplicará los mismos estilos que .
.text-decoration-line-throughaplicará los mismos estilos que <s>.

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

Utilidades de texto

Cambie la alineación, la transformación, el estilo, el peso, la altura de línea, la decoración 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.

Una cita conocida, contenida en un elemento blockquote.

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

Nombrar una fuente

La especificación HTML requiere que la atribución de comillas en bloque se coloque fuera del archivo <blockquote>. Al proporcionar la atribución, envuélvalo <blockquote>en un <figure>y use un <figcaption>elemento de nivel de bloque (por ejemplo, ) con la .blockquote-footerclase. Asegúrese de incluir <cite>también el nombre del trabajo de origen.

Una cita conocida, contenida en un elemento blockquote.

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

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.

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

Una cita conocida, contenida en un elemento blockquote.

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

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

En Bootstrap 5, habilitamos tamaños de fuente receptivos de forma predeterminada, lo que permite que el texto se escale de forma más natural en los tamaños de dispositivos y ventanas gráficas. Eche un vistazo a la página de RFS para averiguar cómo funciona.

Hablar con descaro a

Variables

Los encabezados tienen algunas variables dedicadas para el tamaño y el espaciado.

$headings-margin-bottom:      $spacer * .5;
$headings-font-family:        null;
$headings-font-style:         null;
$headings-font-weight:        500;
$headings-line-height:        1.2;
$headings-color:              null;

Los elementos tipográficos misceláneos cubiertos aquí y en Reiniciar también tienen variables dedicadas.

$lead-font-size:              $font-size-base * 1.25;
$lead-font-weight:            300;

$small-font-size:             .875em;

$sub-sup-font-size:           .75em;

$text-muted:                  $gray-600;

$initialism-font-size:        $small-font-size;

$blockquote-margin-y:         $spacer;
$blockquote-font-size:        $font-size-base * 1.25;
$blockquote-footer-color:     $gray-600;
$blockquote-footer-font-size: $small-font-size;

$hr-margin-y:                 $spacer;
$hr-color:                    inherit;
$hr-height:                   $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$mark-padding:                .2em;

$dt-font-weight:              $font-weight-bold;

$nested-kbd-font-weight:      $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-bg:                     #fcf8e3;

mezclas

No hay mixins dedicados para la tipografía, pero Bootstrap usa Tamaño de fuente sensible (RFS) .