Tekstfarger og bakgrunnsfarger klasser i Bootstrap 5 | Forklart
Tekstfargeklasser
Bootstrap 5 -klasser som er koblet til tekstfarger, hjelper til med å gi mening til teksten. Disse klassene blir referert til som fargeverktøysklasser og brukes også til å style koblinger med hoverstater.
Alle klassene relatert til tekstfarge sammen med betydningen disse formidlingen er forklart her.
.tekst-primary
Den gir en blå farge til teksten og representerer et viktig stykke tekst.
.tekst-videregående
Den gir en grå farge til teksten og representerer sekundær tekst.
.tekst-suksess
Denne klassen gir en grønn farge til teksten og representerer suksess.
.tekst-far
Som navnet antyder, indikerer denne klassen fare og gir en rød farge til teksten.
.tekstvarsling
Den gir en gul farge til teksten og indikerer en advarsel.
.tekst-info
Denne klassen brukes til å representere et stykke informasjon og gi en lettere nyanse av blått til teksten.
.Tekstlys
Det gir en lysegrå farge til teksten.
.tekst-mørk
Denne klassen gir en mørk grå farge til teksten.
.tekst-kropp
Det gir farge til kroppen av teksten som er svart som standard.
.tekstmettet
Den representerer en dempet tekst og gir den en lysegrå farge.
.teksthvit
Som navnet representerer, gir denne klassen en hvit farge til teksten.
Nå vil vi demonstrere alle disse fargene gjennom et eksempel slik at du kan lære å bruke dem.
Eksempel
Tenk på eksemplet nedenfor.
Html
Noe viktig tekst
Tekst med grå farge.
Seier
Fare.
Advarsel
Dette er en viktig informasjon
Hei Verden!
Dette er en mørk tema tekst
Dette er kroppstekst
Denne teksten er dempet
Dette er en tekst med hvit farge
I koden ovenfor har vi ganske enkelt opprettet flere
elementer og tildelt hvert avsnitt en annen tekstfargeklasse.
Produksjon
Alle tekstfargeklasser ble demonstrert vellykket.
Legge til opacitet til teksten
Det er to klasser tilknyttet tekstfarge i Bootstrap 5 som gir opacitet til teksten. Disse er forklart nedenfor.
.tekst-svart-50
Dette representerer en svartfarget tekst med 50% opacitet med hvit bakgrunn.
.tekst-hvitt-50
Dette representerer en hvitfarget tekst med 50% opacitet med svart bakgrunn.
La oss se et eksempel.
Eksempel
I eksemplet nedenfor legger vi til opacitet til teksten ved å bruke de ovennevnte klassene.
Html
Dette avsnittet har en svart farge, 50% opacitet og hvit bakgrunn
Dette avsnittet har en hvit farge, 50% opacitet og svart bakgrunn
Her tildeler vi begge avsnittene en annen klasse for å legge til opacitet til teksten som er til stede i disse avsnittene. Du må også ha lagt merke til at i dette eksemplet og eksemplet ovenfor har vi gitt en svart bakgrunnsfarge til elementene ved hjelp av en bakgrunnsfargeklasse. Bakgrunnsfargeklassene i Bootstrap 5 har blitt diskutert i den kommende delen.
Produksjon
Opacitet ble med hell lagt til teksten.
Bakgrunnsfargeklasser
Bakgrunnsfargeklassene i Bootstrap 5 gir farge til elementene. Navnene på disse klassene ligner på tekstfargeleggsklassene med den eneste forskjellen som prefikset “BG” brukes til klassene assosiert med bakgrunnsfarger.
Husk at disse klassene gir bakgrunnsfarge til elementer, ikke teksten. Alle klassene tilknyttet bakgrunnsfargen er forklart med et eksempel demonstrert nedenfor.
Eksempel
Kontakt eksemplet nedenfor for å forstå bakgrunnsfargeklasser i Bootstrap 5.
Html
Noe viktig tekst
Tekst med grå farge.
Seier
Fare.
Advarsel
Dette er en viktig informasjon
Hei Verden!
Dette er en mørk tema tekst
Dette er en tekst med hvit farge
I koden ovenfor har vi laget flere avsnitt og lagt til en annen bakgrunnsfarge til hver.
Produksjon
Bakgrunnsfarger ble vellykket lagt til avsnittet.
Konklusjon
Fargeklasser i Bootstrap 5 gir farge til teksten, samt leverer en viss betydning angående teksten. I mellomtiden gir klassene assosiert med bakgrunnsfarge farge til bakgrunnen for elementer. Klasser koblet til tekst og bakgrunn har lignende navn med forskjellige prefikser. For tekstfargeklasser er prefikset .tekst-, I mellomtiden, for bakgrunnsfargeklasser er prefikset .BG-. Dette innlegget diskuterer hver av klassekategoriene i detalj sammen med passende eksempler.