Tipografía

Documentación e exemplos para a tipografía Bootstrap, incluíndo configuración global, títulos, texto do corpo, listas e moito máis.

Configuración global

Bootstrap establece estilos básicos de visualización global, tipografía e ligazón. Cando necesites máis control, consulta as clases de utilidade textuais .

Use unha pila de fontes nativas que seleccione o mellor font-familypara cada sistema operativo e dispositivo.
Para unha escala de tipos máis inclusiva e accesible, usamos a raíz predeterminada do navegador font-size(normalmente 16 px) para que os visitantes poidan personalizar os valores predeterminados do navegador segundo sexa necesario.
Use os atributos $font-family-base, $font-size-base, e $line-height-basecomo a nosa base tipográfica aplicada ao <body>.
Establece a cor da ligazón global mediante $link-colore aplique subliñado da ligazón só en :hover.
Utilíceo $body-bgpara configurar un ( background-colorpor defecto).<body>#fff

Estes estilos pódense atopar dentro _reboot.scssde , e as variables globais defínense en _variables.scss. Asegúrate de $font-size-baseconfigurar rem.

Títulos

Todos os títulos HTML, <h1>a través <h6>de , están dispoñibles.

Título	Exemplo
`<h1></h1>`	h1. Título de bootstrap
`<h2></h2>`	h2. Título de bootstrap
`<h3></h3>`	h3. Título de bootstrap
`<h4></h4>`	h4. Título de bootstrap
`<h5></h5>`	h5. Título de bootstrap
`<h6></h6>`	h6. Título 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>

.h1a través .h6de clases tamén están dispoñibles, para cando quere combinar o estilo de fonte dun título pero non pode usar o elemento HTML asociado.

h1. Título de bootstrap

h2. Título de bootstrap

h3. Título de bootstrap

h4. Título de bootstrap

h5. Título de bootstrap

h6. Título 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

Use as clases de utilidade incluídas para recrear o pequeno texto do título secundario de Bootstrap 3.

Encabezado de visualización elegante Con texto secundario esvaecido

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

Mostrar títulos

Os elementos de título tradicionais están deseñados para funcionar mellor na carne do contido da túa páxina. Cando necesites un título para destacar, considera usar un título de visualización , un estilo de título máis grande e un pouco máis obstinado. Teña en conta que estes títulos non responden por defecto, pero é posible activar tamaños de fonte sensibles .

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>

Chumbo

Fai que un parágrafo destaque engadindo .lead.

Este é un parágrafo principal. Destaca dos parágrafos habituais.

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

Elementos de texto en liña

Estilo para elementos HTML5 en liña comúns.

Podes usar a etiqueta mark paradestacartexto.

~~Esta liña de texto está destinada a ser tratada como texto eliminado.~~

~~Esta liña de texto está destinada a ser tratada como xa non precisa.~~

Esta liña de texto está destinada a ser tratada como unha adición ao documento.

Esta liña de texto mostrarase como subliñada

Esta liña de texto está destinada a ser tratada como letra pequena.

Esta liña mostrouse como texto en negra.

Esta liña mostrouse 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>

.marke .smallclases tamén están dispoñibles para aplicar os mesmos estilos que <mark>e <small>evitando as implicacións semánticas non desexadas que traerían as etiquetas.

Aínda que non se mostra arriba, non dubide en usar <b>e <i>en HTML5. <b>está destinado a resaltar palabras ou frases sen transmitir importancia adicional, mentres que <i>é principalmente para voz, termos técnicos, etc.

Utilidades de texto

Cambia o aliñamento do texto, transforma, estilo, peso e cor coas nosas utilidades de texto e cores .

Abreviaturas

Implementación estilizada do <abbr>elemento HTML para abreviaturas e acrónimos para mostrar a versión ampliada ao pasar o cursor. As abreviaturas teñen un subliñado predeterminado e gañan un cursor de axuda para proporcionar contexto adicional ao pasar o cursor e aos usuarios de tecnoloxías de asistencia.

Engadir .initialisma unha abreviatura para un tamaño de letra lixeiramente menor.

atr

HTML

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

Citas de bloque

Para citar bloques de contido doutra fonte dentro do seu documento. Envolve <blockquote class="blockquote">calquera HTML como cita.

Unha cita coñecida, contida nun elemento blockquote.

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

Nomear unha fonte

Engade un <footer class="blockquote-footer">para identificar a fonte. Envolve o nome da obra de orixe en <cite>.

Unha cita coñecida, contida nun elemento blockquote.

Alguén famoso en Source Title

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

Aliñación

Use as utilidades de texto segundo sexa necesario para cambiar o aliñamento da súa cita de bloque.

Unha cita coñecida, contida nun elemento blockquote.

Alguén famoso en Source Title

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

Unha cita coñecida, contida nun elemento blockquote.

Alguén famoso en Source Title

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

Listas

Sen estilo

list-styleElimina a marxe predeterminada e esquerda dos elementos da lista (só fillos inmediatos). Isto só se aplica aos elementos de lista fillos inmediatos , o que significa que tamén terás que engadir a clase para calquera lista aniñada.

Esta é unha lista.
Parece totalmente sen estilo.
Estruturalmente, aínda é unha lista.
Non obstante, este estilo só se aplica aos elementos fillos inmediatos.
Listas anidadas:
- non se ven afectados por este estilo
- aínda mostrará unha bala
- e ter unha marxe esquerda adecuada
Isto aínda pode ser útil nalgunhas situacións.

<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 liña

Elimina as viñetas dunha lista e aplica un pouco de luz margincunha combinación de dúas clases, .list-inlinee .list-inline-item.

Este é un elemento da lista.
E outra.
Pero móstranse en liña.

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

Aliñación da lista de descricións

Aliñe os termos e as descricións horizontalmente usando as clases predefinidas do noso sistema de cuadrícula (ou mixins semánticos). Para termos máis longos, pode engadir opcionalmente unha .text-truncateclase para truncar o texto cun punto suspensivo.

Listas de descricións

Unha lista de descricións é perfecta para definir termos.

Prazo

Definición para o termo.

E algo máis de texto de definición de marcador de posición.

Outro termo

Esta definición é curta, polo que non hai parágrafos adicionais nin nada.

O termo truncado está truncado

Isto pode ser útil cando o espazo é reducido. Engade puntos suspensivos ao final.

Aniñación

Lista de definicións anidadas: Oín que che gustan as listas de definicións. Déixame poñer unha lista de definicións dentro da túa lista de definicións.

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

A partir da versión 4.3.0, Bootstrap inclúe a opción de activar tamaños de fonte sensibles, o que permite que o texto se escale de forma máis natural nos tamaños do dispositivo e das vistas. Pódese activar RFS$enable-responsive-font-sizes cambiando a variable Sass truee recompilando Bootstrap.

Para soportar RFS , usamos un mixin Sass para substituír as nosas font-sizepropiedades normais. Os tamaños de fontes sensibles compilaranse en calc()funcións cunha mestura de remunidades e vistas para habilitar o comportamento de escala receptivo. Pódese atopar máis información sobre RFS e a súa configuración no seu repositorio de GitHub .