Colori di testo e colori di sfondo Classi in bootstrap 5 | Spiegato

I colori sono un ottimo modo per fornire significato al contenuto che appare su un sito Web. Bootstrap 5 Proprio come le versioni precedenti forniscono anche varie classi per dare colore al testo e al colore di sfondo agli elementi. Queste classi aiutano a generare fogli di stile con meno righe di codice che sono molto più gestibili. Qui in questo post, esploreremo varie classi bootstrap 5 collegate al colore del testo e al colore di sfondo.

Classi di colore del testo

Le classi Bootstrap 5 che sono collegate ai colori del testo aiutano a fornire significato al testo. Queste classi sono indicate come classi di utilità a colori e sono anche utilizzate per modellare i collegamenti con gli stati hover.

Tutte le classi relative al colore del testo insieme al significato che questi trasmettono sono spiegati qui.

.testo-primario

Dà un colore blu al testo e rappresenta un importante pezzo di testo.

.testo-secondario

Fornisce un colore grigio al testo e rappresenta il testo secondario.

.SUCCESSIONE DEL TESTO

Questa classe dà un colore verde al testo e rappresenta il successo.

.canale di testo

Come suggerisce il nome, questa classe indica il pericolo e dà un colore rosso al testo.

.Warning di testo

Fornisce un colore giallo al testo e indica un avvertimento.

.text-info

Questa classe viene utilizzata per rappresentare un'informazione e fornire una tonalità più chiara di blu al testo.

.Light di testo

Dà un colore grigio chiaro al testo.

.testo-buio

Questa classe dà un colore grigio scuro al testo.

.Text-body

Fornisce colore al corpo del testo che è nero per impostazione predefinita.

.Mieto di testo

Rappresenta un testo silenzioso e gli dà un colore grigio chiaro.

.bianco-bianco

Come rappresenta il nome, questa classe fornisce un colore bianco al testo.

Ora dimostreremo tutti questi colori attraverso un esempio in modo da poter imparare a usarli.

Esempio

Considera l'esempio di seguito.

Html

Qualche testo importante

Testo con colore grigio.

Vittoria

Pericolo.

Avvertimento

Questa è un'informazione importante

Ciao mondo!

Questo è un testo a tema oscuro

Questo è il testo del corpo

Questo testo è disattivato

Questo è un testo con colore bianco

Nel codice sopra, abbiamo semplicemente creato più

elementi e assegnato ogni paragrafo una classe di colore di testo diversa.

Produzione

Tutte le classi di colore del testo sono state dimostrate con successo.

Aggiunta di opacità al testo

Esistono due classi associate al colore del testo in Bootstrap 5 che aggiungono opacità al testo. Questi sono spiegati di seguito.

.testo-nero-50

Questo rappresenta un testo di colore nero con opacità del 50% con uno sfondo bianco.

.text-white-50

Questo rappresenta un testo di colore bianco con opacità del 50% con uno sfondo nero.

Vediamo un esempio.

Esempio

Nell'esempio seguente stiamo aggiungendo opacità al testo usando le classi sopra menzionate.

Html

Questo paragrafo ha un colore nero, il 50% di opacità e uno sfondo bianco

Questo paragrafo ha un colore bianco, il 50% di opacità e uno sfondo nero

Qui stiamo assegnando entrambi i paragrafi una classe diversa per aggiungere opacità al testo presente all'interno di quei paragrafi. Devi anche aver notato che in questo esempio e l'esempio sopra abbiamo dato un colore di sfondo nero agli elementi usando una classe di colore di sfondo. Le classi di colore di sfondo in Bootstrap 5 sono state discusse nella prossima sezione.

Produzione

L'opacità è stata aggiunta con successo al testo.

Classi di colore di sfondo

Le classi di colore di sfondo in Bootstrap 5 forniscono il colore agli elementi. I nomi di queste classi sono simili alle classi di colore del testo del testo con l'unica differenza che il prefisso "BG" viene utilizzato per le classi associate ai colori dello sfondo.

Tieni presente questo che queste classi forniscono il colore di sfondo agli elementi, non il testo. Tutte le classi associate al colore di sfondo sono spiegate con un esempio dimostrato di seguito.

Esempio

Consultare l'esempio seguente per comprendere le classi di colore di sfondo in bootstrap 5.

Html

Qualche testo importante

Testo con colore grigio.

Vittoria

Pericolo.

Avvertimento

Questa è un'informazione importante

Ciao mondo!

Questo è un testo a tema oscuro

Questo è un testo con colore bianco

Nel codice sopra, abbiamo creato più paragrafi e aggiunto un colore di sfondo diverso a ciascuno.

Produzione

I colori di sfondo sono stati aggiunti con successo ai paragrafi.

Conclusione

Le classi di colore in bootstrap 5 forniscono colore al testo e forniscono un certo significato per quanto riguarda il testo. Nel frattempo, le classi associate al colore di sfondo forniscono il colore allo sfondo degli elementi. Le classi collegate al testo e allo sfondo hanno nomi simili con prefissi diversi. Per le classi di colore del testo il prefisso è .testo-, Nel frattempo, per le classi di colore di sfondo il prefisso è .bg-. Questo post discute in dettaglio ciascuna delle categorie di classe insieme ad esempi appropriati.