Tipografia

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

Nesta página

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, usamos 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 via $link-color.
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

html

<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

html

<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

Exibição 5

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

Os cabeçalhos de exibição são configurados por meio do $display-font-sizesmapa Sass e duas variáveis, $display-font-weighte $display-line-height.

Os títulos de exibição são personalizáveis por meio de duas variáveis $display-font-familye $display-font-style.

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

$display-font-family: null;
$display-font-style:  null;
$display-font-weight: 300;
$display-line-height: $headings-line-height;

Conduzir

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

Este é um parágrafo inicial. Destaca-se dos parágrafos regulares.

html

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</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.

html

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

Esteja ciente de que essas tags devem ser usadas para fins semânticos:

representa o texto que está marcado ou destacado para fins de referência ou notação.
representa comentários laterais e letras pequenas, como direitos autorais e texto legal.
<s>representa elementos que não são mais relevantes ou não são mais precisos.
representa um intervalo de texto embutido que deve ser renderizado de forma a indicar que possui uma anotação não textual.

Se você quiser estilizar seu texto, use as seguintes classes:

.markaplicará os mesmos estilos que .
.smallaplicará os mesmos estilos que .
.text-decoration-underlineaplicará os mesmos estilos que .
.text-decoration-line-throughaplicará os mesmos estilos que <s>.

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

Utilitários de texto

Altere o alinhamento do texto, transforme, estilo, peso, altura da linha, decoração e cor 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

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.

Uma citação bem conhecida, contida em um elemento blockquote.

html

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

Nomeando uma fonte

A especificação HTML requer que a atribuição de blockquote seja colocada fora do <blockquote>. Ao fornecer atribuição, envolva seu <blockquote>em a <figure>e use a <figcaption>ou um elemento de nível de bloco (por exemplo, ) com a .blockquote-footerclasse. Certifique-se de incluir <cite>também o nome do trabalho de origem.

Uma citação bem conhecida, contida em um elemento blockquote.

html

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

Alinhamento

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

Uma citação bem conhecida, contida em um elemento blockquote.

html

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

Uma citação bem conhecida, contida em um elemento blockquote.

html

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

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.

Esta é uma lista.
Parece completamente sem estilo.
Estruturalmente, ainda é uma lista.
No entanto, esse estilo se aplica apenas a elementos filho imediatos.
Listas aninhadas:
- não são afetados por este estilo
- ainda mostrará uma bala
- e ter margem esquerda apropriada
Isso ainda pode ser útil em algumas situações.

html

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

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.

Este é um item de lista.
E um outro.
Mas eles são exibidos em linha.

html

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

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.

Prazo

Definição para o termo.

E mais algum texto de definição de espaço reservado.

Outro termo

Esta definição é curta, então não há parágrafos extras ou qualquer coisa.

O termo truncado é truncado

Isso pode ser útil quando o espaço é apertado. Adiciona reticências no final.

Aninhamento

Lista de definições aninhadas: Ouvi dizer que você gosta de listas de definições. Deixe-me colocar uma lista de definições dentro de sua lista de definições.

html

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

Tamanhos de fonte responsivos

No Bootstrap 5, habilitamos tamanhos de fonte responsivos por padrão, permitindo que o texto seja dimensionado de forma mais natural entre os tamanhos do dispositivo e da janela de visualização. Dê uma olhada na página RFS para descobrir como isso funciona.

Sass

Variáveis

Os títulos têm algumas variáveis dedicadas para dimensionamento e espaçamento.

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

Os diversos elementos de tipografia abordados aqui e no Reboot também possuem variáveis 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;

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             $border-width;
$hr-opacity:                  .25;

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

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

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-bg:                     $yellow-100;

Mixins

Não há mixins dedicados para tipografia, mas o Bootstrap usa Responsive Font Sizing (RFS) .