Introdução à Tipografia de Bootstrap

A tipografia é um dos recursos mais recentes do bootstrap. É especialmente usado para estilizar e formatar elementos de texto. Usando o recurso de tipografia do bootstrap, alguém capaz de criar cabeçalhos, parágrafos, alguns outros elementos embutidos e listas. Basicamente, o bootstrap usa 1rem (16px) como tamanho da fonte, incluindo a altura da linha permanece 5. Por padrão, as famílias de fontes usadas pelo bootstrap são sans-serif, Arial, define como o conteúdo deve ser exibido no corpo, a cor de fundo no corpo, usa a fonte tamanho e altura da linha para criar margens, preenchimentos, etc.

Recursos da tipografia de bootstrap

Abaixo estão os diferentes recursos da tipografia, como a seguir:

1) Cabeçalhos

Os cabeçalhos HTML são divididos em

para

Cabeçalho do Bootstrap
exibido em tamanho de fonte

Cabeçalho do Bootstrap

exibido em tamanho de fonte

Cabeçalho do Bootstrap

exibido em tamanho de fonte

Cabeçalho do Bootstrap

exibido em tamanho de fonte
Cabeçalho do Bootstrap
exibido em tamanho de fonte
Cabeçalho do Bootstrap
exibido em tamanho de fonte

Ao usar o código HTML, ele fornece a saída como mostrado abaixo:

Ao usar a tipografia Bootstrap, ele estilizou e formatou usando as respectivas classes, como mostrado abaixo:

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

A saída do código acima usando a Tipografia do Bootstrap é a seguinte:

2) Cabeçalhos responsivos

Cabeçalhos responsivos são uma das melhores coisas que se pode criar usando tipografia. esses são os elementos nos quais o texto é ajustado automaticamente usando a classe responsiva conforme o tamanho do dispositivo. Assim, é possível ver facilmente o mesmo texto de maneira apropriada em diferentes dispositivos.

Basta adicionar a classe responsiva na sua tag de cabeçalho da seguinte maneira:

Responsive Header

Então, ele mostrará a saída como:

Cabeçalho responsivo.

Você também pode verificar o mesmo texto nos diferentes dispositivos e, redimensionando o navegador, ele mostrará as alterações.

3)

Essa tag é usada para criar texto secundário mais leve e menor em seu cabeçalho. Por padrão, ele define 85% do tamanho do cabeçalho pai.

Exemplo:

Example heading secondary text

Resultado:

texto secundário do cabeçalho h5

4)

Essa tag é usada para destacar o texto.

Exemplo:

Bootstrap Typography

Bootstrap Typography

Isso é usado para destacar o texto.

5)

Essa tag é usada para marcar uma abreviação. 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 de assistência.

Exemplo:

Existem tantos países no mundo. Indiais é o melhor país

6)

Indica texto excluído

Exemplo:

Essa tag é usada para mostrar o texto excluído.

Resultado:

Essa tag é usada para mostrar.

7)

O elemento blockquote é usado para apresentar conteúdo de outra fonte.

Exemplo:

Blockquotes

Blockquotes

O elemento blockquote é usado para apresentar conteúdo de outra fonte:


É necessário muito pouco para fazer uma vida feliz; é tudo dentro de você, na sua maneira de pensar. A vida é como tocar violino em público e aprender o instrumento à medida que se avança.

Resultado:

Citações em bloco
O elemento blockquote é usado para apresentar conteúdo de outra fonte:

É necessário muito pouco para fazer uma vida feliz; está tudo dentro de você, na sua maneira de pensar. A vida é como tocar violino em público e aprender o instrumento à medida que se avança.

8)
:

Essa tag é usada para exibir uma lista de descrição.

Exemplo:

O elemento dl indica uma lista de descrição:


Pão

- branco

- Castanho

Bebidas Frias

- Pepsi

Resultado:

O elemento dl indica uma lista de descrição:

Pão
Branco
Castanho
Bebidas Frias
Pepsi.

9)

A declaração de código em linha deve ser agrupada no elemento de código.

Exemplo:

Os seguintes elementos HTML: span, section e div definem uma seção em um documento.

Resultado:

Os seguintes elementos HTML: span, section e div definem uma seção em um documento.

10) Cores contextuais

Isso não passa de uma classe diferente usada para transmitir significado usando cores diferentes.
É ter classes diferentes, como .text-muded, .text-info, .text-primary, .text-success, .text-warning, .text-danger.

Exemplo:

Use as classes contextuais para fornecer "significado através das cores":

Este texto está mudo.

Este texto é importante.

Este texto indica sucesso.

Este texto representa algumas informações.

Este texto representa um aviso.

Este texto representa perigo.

Resultado:

Este texto está mudo.
Este texto é importante.
Este texto indica sucesso.
Este texto representa algumas informações.
Este texto representa um aviso.
Este texto representa perigo.

Onde podemos usar

  • A maioria dos web designers prefere usar a tipografia de inicialização para obter uma melhor aparência do formato do texto.
  • É especialmente usado ao estilizar e formatar o conteúdo do texto.
  • Na maioria das vezes, há um problema relacionado à capacidade de resposta ao texto. O tamanho do texto varia de acordo com os diferentes dispositivos. Portanto, esses problemas são esclarecidos usando o recurso de tipografia de inicialização.
  • A Tipografia do Bootstrap é personalizada de uma maneira simples para se apresentar de maneira atraente para o usuário final.
  • Esses elementos de texto em uma página da web sempre serão renderizados através do link para a folha de estilos do Bootstrap 4 da mesma maneira, exceto que esses elementos são substituídos por outras classes de estilos.
  • O Bootstrap fornece aos desenvolvedores recursos de tipografia convenientes para facilitar a criação de cabeçalhos, parágrafos, listas e outros elementos em linha que seriam atraentes para os leitores.

Conclusão

  • De acordo com todos os detalhes fornecidos no conteúdo acima, os diferentes recursos tipográficos do Bootstrap para títulos, citações em bloco, texto principal, texto marcado e abreviações com exemplos adequados.
  • Esses recursos robustos e bonitos do Bootstrap o tornam um framework de desenvolvimento de front-end muito popular e exclusivo, amplamente utilizado por muitas organizações.
  • O bootstrap vem com todas as tags de tipografia que queremos estilizar, desde uma tag até

    e toda a hierarquia de cabeçalho.

Artigos recomendados

Este é um guia para Tipografia de Bootstrap. Aqui discutimos diferentes recursos da Tipografia do Bootstrap, como títulos, citações em bloco, abreviação, marca etc. Você também pode consultar os seguintes artigos para saber mais -

  • Comandos de inicialização
  • Componentes do Bootstrap
  • Como instalar o Bootstrap
  • Layout do Bootstrap

Categoria:

Desenvolvimento de software