Colori di testo e colori di sfondo Classi in bootstrap 5 | Spiegato
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.