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-family
para 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-base
e$line-height-base
como nossa base tipográfica aplicada ao<body>
. - Defina a cor do link global por meio de
$link-color
e aplique sublinhados de link somente em:hover
. - Use
$body-bg
para definir umbackground-color
no<body>
(#fff
por 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-base
em rem
.
Títulos
Todos os cabeçalhos HTML, <h1>
por meio <h6>
de , estão disponíveis.
Cabeçalho | Exemplo |
---|---|
|
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 |
.h1
as classes through .h6
també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
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
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. Lembre-se de que esses títulos não são responsivos por padrão, mas é possível habilitar tamanhos de fonte responsivos .
Exibição 1 |
Exibição 2 |
Exibição 3 |
Exibição 4 |
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.
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.
.mark
e .small
classes 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 .initialism
a uma abreviação para um tamanho de fonte um pouco menor.
atr
HTML
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.
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.
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Listas
Sem estilo
Remova o padrão list-style
e 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
Em linha
Remova os marcadores de uma lista e aplique um pouco de luz margin
com uma combinação de duas classes .list-inline
e .list-inline-item
.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
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-truncate
classe 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.
Tamanhos de fonte responsivos
A partir da v4.3.0, o Bootstrap vem com a opção de habilitar tamanhos de fonte responsivos, permitindo que o texto seja dimensionado de forma mais natural entre os tamanhos do dispositivo e da janela de visualização. O RFS pode ser habilitado alterando a $enable-responsive-font-sizes
variável Sass para true
e recompilando o Bootstrap.
Para suportar RFS , usamos um mixin Sass para substituir nossas font-size
propriedades normais. Os tamanhos de fonte responsivos serão compilados em calc()
funções com uma combinação de rem
unidades de viewport para permitir o comportamento de dimensionamento responsivo. Mais sobre o RFS e sua configuração podem ser encontrados em seu repositório GitHub .