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, asumimos a raíz predeterminada do navegador font-size(normalmente 16 px) para que os visitantes poidan personalizar os valores predeterminados do seu 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.

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.

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 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 teu documento. Envolve <blockquote class="blockquote">calquera HTML como cita.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer 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>

Nomear unha fonte

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

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

Alguén famoso en Source Title

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

Aliñación

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

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

Alguén famoso en Source Title

<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. Integer posuere erat a ante.

Alguén famoso en Source Title

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

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.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie Lorem at Massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget portttitor 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 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.

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>

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.

Euismod

Vestibulum id ligula porta felis euismod sempre 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.

O termo truncado está truncado

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

Aniñación

Lista de definicións 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

A tipografía receptiva refírese a escalar texto e compoñentes simplemente axustando o elemento raíz font-sizenunha serie de consultas multimedia. Bootstrap non fai isto por ti, pero é bastante sinxelo engadir se o necesitas.

Aquí tes un exemplo diso na práctica. Escolle as font-sizeconsultas e as consultas multimedia que desexes.

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