La tipografia svolge un ruolo importante quando si tratta di attirare l'attenzione di un utenti. Nel web design, la tipografia si riferisce allo styling squisitamente il testo in modo che sembri attraente per l'occhio umano. Quale dovrebbe essere la dimensione del carattere, gli accoppiamenti, l'allineamento, lo stile, ecc. Tutti hanno il termine tipografia. Bootstrap 5 fornisce varie classi che ti aiutano a modellare il tuo testo in vari modi. Questo rapporto discute in dettaglio queste classi in dettaglio.

Bootstrap 5 Intestazioni

È possibile creare intestazioni in Bootstrap 5 usando il

A

Tag proprio come fai in HTML. Tuttavia, in Bootstrap 5 noterai che le intestazioni hanno una famiglia di caratteri diversa da quelli creati usando solo HTML. Inoltre, la dimensione del carattere è reattiva, il che significa che cambia corrispondente alla dimensione della finestra del browser.

Esempio

Questo esempio dimostra le intestazioni Bootstrap 5.

Html

Questa è una voce

Questa è una voce

Questa è una voce

Questa è una voce

Questa è una voce

Questa è una voce

Abbiamo semplicemente creato un contenitore di div e le intestazioni

A

All'interno di quel contenitore.

Produzione

Le intestazioni Bootstrap 5 sono state create con successo.

Lezioni di testa

Bootstrap 5 consente ai suoi utenti di far sembrare altri elementi come intestazioni attraverso l'uso del .H1 A .H6 classi.

Esempio

Supponiamo di voler visualizzare un paragrafo come intestazione, quindi seguire lo snippet di codice di seguito.

Html

Questo è un paragrafo.

Questo è un paragrafo.

Questo è un paragrafo.

Questo è un paragrafo.

Questo è un paragrafo.

Questo è un paragrafo.

Qui ciascuno dei

Agli elementi è stata data una classe di intestazione diversa.

Produzione

I paragrafi sono stati disegnati usando le classi di intestazione.

Visualizza le classi

Se vuoi ingrandire le tue intestazioni con un peso del carattere più leggero, puoi assegnare le lezioni di intestazioni .Display-1 Attraverso .display-6.

Esempio

Ecco come funzionano queste classi di visualizzazione.

Intestazione 1

Intestazione 2

Intestazione 3

Intestazione 4

Intestazione 5

Intestazione 6

Nel codice sopra, ciascuno

A elemento è stata assegnata una classe di visualizzazione diversa per dimostrare correttamente il concetto di queste classi.

Produzione

Le classi di visualizzazione funzionano correttamente.

Piccola classe

Allo scopo di rendere più piccola una determinata parte di un testo, il .piccolo classe o il viene utilizzato l'elemento.

Esempio

Supponiamo che tu voglia un certo pezzo di testo nella tua intestazione, quindi segui la dimostrazione di seguito.

Html

Ciao Mondo!

Qui è stata creata un'intestazione e una parte dell'intestazione è stata ridotta di dimensioni usando il piccolo classe. Un'altra cosa che noterai è che abbiamo usato la classe .text-info Per fornire un certo colore al testo. Puoi usare le classi di colore del testo allo stesso modo per modellare i tuoi elementi.

Produzione

Una parte dell'intestazione è stata resa più piccola.

Mark Class

Vogliamo spesso evidenziare un certo testo per farlo risaltare o forse attirare l'attenzione dei lettori. In Bootstrap 5 puoi farlo usando il .segno classe o il elemento.

Esempio

Mettiamo in evidenza un testo.

Html

Questo frammento di codice mostra come evidenziareun testo.

Qui l'elemento è stato utilizzato per evidenziare un pezzo del paragrafo generato nel codice sopra.

Produzione

Il testo è stato evidenziato.

Classe blockquote

Ai fini della citazione del testo da altre fonti, utilizzare il .blockquote classe nella

elemento.

Esempio

Supponiamo di voler citare un detto da qualche altra fonte.

Html

Alcuni dicono ..

Nel codice sopra, per citare un detto che abbiamo usato il

elemento e scritto il detto in a

elemento. Successivamente, per nominare la fonte del detto, stiamo usando il .classe blockquote-footer nel tag.

Produzione

Un detto è stato citato con successo.

Classe di piombo

Per far risaltare i tuoi paragrafi usa il .Guida classe nella

elemento.

Esempio

Nell'esempio seguente stiamo confrontando un normale paragrafo con un paragrafo con una classe di piombo per mostrare la differenza tra i due.

Html

Questo è un paragrafo.

Questo è un altro paragrafo.

Produzione

La classe principale funziona correttamente.

Alcuni altri tipi di classe insieme alle loro classi associate sono stati elencati nella tabella seguente.

Tipi di classe	Classi	Descrizione
Allineamento del testo	.Text-Start, .centro di testo, .end di testo	Per allineare il testo.
Allineamento del testo basato sui dispositivi	.TEXT-SM/MD/LG/XL-START/CENTRO/END	Per allineare il testo in base a diversi tipi di dispositivi.
Trasformazione del testo	.Testo-basso, .text-uppercase, .Capitalizza in testo	Per trasformare il caso del testo.
Colorazione del testo	.testo-primario, .text-info, .SUCCESSIONE DEL TESTO, .testo-secondario, .Warning di testo, .canale di testo, .Mieto di testo	Per fornire colore al testo.
Testo di avvolgimento e overflow	.text-wrap, .text-nowrap, .Testo-break	Per avvolgere un testo o rompere una lunga parola.
Troncando il testo lungo	.Testo-troncato	Per rompere un lungo testo.

Conclusione

Le lezioni di tipografia in bootstrap 5 consentono ai suoi utenti di modellare il testo che appare su un sito Web con grande facilità. Queste classi impediscono ai suoi utenti di fare così ampi fogli di stile, riducendo il numero di linee di codice e risparmiando molto tempo e sforzi. Le classi associate alla tipografia in Bootstrap 5 sono state dimostrate in questo articolo insieme a esempi pertinenti.