Source

Tipografia

Documentação e exemplos para tipografia Bootstrap, incluindo configurações globais, títulos, corpo de texto, listas e muito mais.

Configurações globais

O Bootstrap define os estilos básicos de exibição global, tipografia e link. Quando for necessário mais controle, confira as classes de utilitários textuais .

Use uma pilha de fontes nativas que selecione o melhor font-familypara cada sistema operacional e dispositivo.
Para uma escala de tipo mais inclusiva e acessível, assumimos a raiz padrão do navegador font-size(normalmente 16px) para que os visitantes possam personalizar os padrões do navegador conforme necessário.
Use os atributos $font-family-base, $font-size-basee $line-height-basecomo nossa base tipográfica aplicada ao <body>.
Defina a cor do link global por meio de $link-colore aplique sublinhados de link somente em :hover.
Use $body-bgpara definir um background-colorno <body>( #fffpor padrão).

Esses estilos podem ser encontrados em _reboot.scss, e as variáveis globais são definidas em _variables.scss. Certifique-se de definir $font-size-baseem rem.

Títulos

Todos os cabeçalhos HTML, <h1>por meio <h6>de , estão disponíveis.

Cabeçalho	Exemplo
`<h1></h1>`	h1. Título de inicialização
`<h2></h2>`	h2. Título de inicialização
`<h3></h3>`	h3. Título de inicialização
`<h4></h4>`	h4. Título de inicialização
`<h5></h5>`	h5. Título de inicialização
`<h6></h6>`	h6. Título de inicialização

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

.h1as classes through .h6também estão disponíveis, para quando você deseja combinar o estilo da fonte de um título, mas não pode usar o elemento HTML associado.

h1. Título de inicialização

h2. Título de inicialização

h3. Título de inicialização

h4. Título de inicialização

h5. Título de inicialização

h6. Título de inicialização

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

Personalizando títulos

Use as classes de utilitário incluídas para recriar o pequeno texto de cabeçalho secundário do Bootstrap 3.

Título de exibição extravagante Com texto secundário desbotado

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

Exibir títulos

Os elementos de título tradicionais são projetados para funcionar melhor na carne do conteúdo da sua página. Quando você precisar que um título se destaque, considere usar um título de exibição — um estilo de título maior e um pouco mais opinativo.

Exibição 1

Exibição 2

Exibição 3

Exibição 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>

Conduzir

Faça um parágrafo se destacar adicionando .lead.

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

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

Elementos de texto embutidos

Estilização para elementos HTML5 inline comuns.

Você pode usar a marca de marca pararealçartexto.

~~Esta linha de texto deve ser tratada como texto excluído.~~

~~Esta linha de texto deve ser tratada como não mais precisa.~~

Esta linha de texto deve ser tratada como uma adição ao documento.

Esta linha de texto será renderizada como sublinhada

Esta linha de texto deve ser tratada como letras miúdas.

Esta linha renderizada como texto em negrito.

Esta linha renderizada como texto em itálico.

<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 .smallclasses também estão disponíveis para aplicar os mesmos estilos <mark>e <small>evitando quaisquer implicações semânticas indesejadas que as tags trariam.

Embora não mostrado acima, sinta-se à vontade para usar <b>e <i>em HTML5. <b>destina-se a destacar palavras ou frases sem transmitir importância adicional, enquanto <i>é principalmente para voz, termos técnicos, etc.

Utilitários de texto

Altere o alinhamento, a transformação, o estilo, a espessura e a cor do texto com nossos utilitários de texto e utilitários de cores .

Abreviaturas

Implementação estilizada do <abbr>elemento HTML para abreviaturas e siglas para mostrar a versão expandida ao passar o mouse. As abreviações têm um sublinhado padrão e ganham um cursor de ajuda para fornecer contexto adicional ao passar o mouse e aos usuários de tecnologias assistivas.

Adicione .initialisma uma abreviação para um tamanho de fonte um pouco menor.

atr

HTML

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

Citações em bloco

Para citar blocos de conteúdo de outra fonte em seu documento. Envolva <blockquote class="blockquote">qualquer HTML como a citação.

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>

Nomeando uma fonte

Adicione um <footer class="blockquote-footer">para identificar a fonte. Envolva o nome do trabalho de origem em <cite>.

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

Alguém famoso em 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>

Alinhamento

Use utilitários de texto conforme necessário para alterar o alinhamento de sua citação em bloco.

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

Alguém famoso em 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ém famoso em 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

Sem estilo

Remova o padrão list-stylee a margem esquerda nos itens da lista (somente filhos imediatos). Isso se aplica apenas a itens de lista filhos imediatos , o que significa que você também precisará adicionar a classe para qualquer lista aninhada.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem em massa
Facilisis em pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Ultricies Purus sodales
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
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>

Em linha

Remova os marcadores de uma lista e aplique um pouco de luz margincom uma combinação de duas classes .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>

Alinhamento da lista de descrição

Alinhe termos e descrições horizontalmente usando as classes predefinidas do nosso sistema de grade (ou mixins semânticos). Para termos mais longos, você pode adicionar opcionalmente uma .text-truncateclasse para truncar o texto com reticências.

Listas de descrição

Uma lista de descrição é perfeita 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.

porta Malesuada

Etiam porta sem maleuada magna mollis euismod.

O termo truncado é truncado

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

Aninhamento

Lista de definições aninhadas: 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>

Tipografia responsiva

A tipografia responsiva refere-se ao dimensionamento de texto e componentes simplesmente ajustando o elemento raiz font-sizeem uma série de consultas de mídia. O Bootstrap não faz isso por você, mas é bastante fácil de adicionar se você precisar.

Aqui está um exemplo disso na prática. Escolha quaisquer font-sizeconsultas de mídia que desejar.

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