A tipografia desempenha um papel importante quando se trata de chamar a atenção de um usuário. No web design, a tipografia refere -se a modelar requintadamente seu texto para que pareça atraente para o olho humano. Qual deve ser o tamanho da fonte, pares, alinhamento, estilo etc. Bootstrap 5 oferece várias classes que ajudam você a estilizar seu texto de várias maneiras. Este relatório discute essas classes em detalhes.

Bootstrap 5 títulos

Você pode criar títulos no bootstrap 5 usando o

para

tags como você faz em html. No entanto, no bootstrap 5, você notará que os títulos têm uma família de fontes diferentes das criadas usando apenas HTML. Além disso, o tamanho da fonte é responsivo, o que significa que ela muda correspondente ao tamanho da janela do navegador.

Exemplo

Este exemplo demonstra Bootstrap 5 títulos.

Html

Este é um título

Este é um título

Este é um título

Este é um título

Este é um título

Este é um título

Simplesmente criamos um recipiente de div e colocamos títulos de

para

dentro desse recipiente.

Saída

Bootstrap 5 títulos foram criados com sucesso.

Aulas de direção

Bootstrap 5 permite que seus usuários façam outros elementos pareçam títulos através do uso do .H1 para .H6 Aulas.

Exemplo

Suponha que você queira exibir um parágrafo como um título e siga o trecho de código abaixo.

Html

Este é um parágrafo.

Este é um parágrafo.

Este é um parágrafo.

Este é um parágrafo.

Este é um parágrafo.

Este é um parágrafo.

Aqui cada um dos

Elementos recebeu uma classe de título diferente.

Saída

Os parágrafos foram estilizados usando aulas de título.

Exibir classes

Se você quiser aumentar seus títulos com um peso de fonte mais leve, poderá atribuir suas aulas de título .display-1 através .display-6.

Exemplo

Aqui está como essas aulas de exibição funcionam.

Cabeçallho 1

Titular 2

Título 3

Cabeçalho 4

Titular 5

CIDADE 6

No código acima, cada um

O elemento recebeu uma classe de exibição diferente para demonstrar o conceito dessas classes corretamente.

Saída

As classes de exibição estão funcionando corretamente.

Classe pequena

Com o objetivo de tornar uma certa parte de um texto menor, o .pequeno classe ou a elemento é usado.

Exemplo

Suponha que você queira um certo pedaço de texto em seu cabeçalho menor e siga a demonstração abaixo.

Html

Olá Mundo!

Aqui foi criado um título e uma parte do título foi reduzida em tamanho usando o pequeno aula. Outra coisa que você notará é que usamos a classe .Text-Info Para fornecer uma certa cor ao texto. Você pode usar classes de cores de texto da mesma maneira para estilizar seus elementos.

Saída

Uma parte do cabeçalho foi reduzida com sucesso.

Mark Class

Muitas vezes, queremos destacar certos texto para destacá -lo ou talvez chamar a atenção dos leitores. No bootstrap 5, você pode fazê -lo usando o .marca classe ou a elemento.

Exemplo

Vamos destacar um texto.

Html

Este trenó de código mostra como fazer destaqueum texto.

Aqui, o elemento foi usado para destacar um pedaço do parágrafo gerado no código acima.

Saída

O texto foi destacado.

Classe BlockQuote

Com o objetivo de citar texto de outras fontes, utilize o .bloco de citação classe no

elemento.

Exemplo

Suponha que você queira citar um ditado de alguma outra fonte.

Html

Alguns dizendo ..

No código acima, para citar um ditado que usamos o

elemento e escrito o ditado em um

elemento. Depois, para nomear a fonte do ditado, estamos usando o .Classe BlockQuote-Footer na tag.

Saída

Um ditado foi citado com sucesso.

Classe de chumbo

Para destacar seus parágrafos, use o .liderar classe no

elemento.

Exemplo

No exemplo abaixo, estamos comparando um parágrafo normal com um parágrafo com uma classe de liderança para mostrar a diferença entre os dois.

Html

Este é um parágrafo.

Este é outro parágrafo.

Saída

A classe principal está funcionando corretamente.

Alguns outros tipos de classe, juntamente com suas classes associados, foram listados na tabela abaixo.

Tipos de classe	Aulas	Descrição
Alinhamento de texto	.partida de texto, .Centro de texto, .Text-end	Para alinhar o texto.
Alinhamento de texto baseado em dispositivo	.Text-SM/MD/LG/XL-Start/Center/End	Alinhar o texto com base em diferentes tipos de dispositivos.
Transformação de texto	.text-lowercase, .Appercase de texto, .capitalização de texto	Para transformar o caso de texto.
Coloração de texto	.Primary de texto, .Text-Info, .Texto-sucesso, .Texto-secundário, .envergonhamento de texto, .Danger de texto, .Mutado por texto	Para fornecer cores ao texto.
Embrulho de texto e transbordamento	.Enrole de texto, .Text-Nowrap, .Roupa de texto	Para embrulhar um texto ou quebrar uma palavra longa.
TRUNCANTE LONGO TEXTO LONGO	.TEXTO TRUNCA	Para quebrar um texto longo.

Conclusão

Aulas de tipografia no Bootstrap 5 permitem que seus usuários estilizem o texto que aparece em um site com grande facilidade. Essas classes impedem seus usuários de fazer extensas folhas de estilo, reduzindo o número de linhas de código e economizando muito tempo e esforço. Classes associadas à tipografia no bootstrap 5 foram demonstradas neste artigo, juntamente com exemplos relevantes.