Varsler i Bootstrap 5 | Forklart
Å gi disse varslingsmeldingene en viss stil er også viktig fordi den stilen spiller en viktig rolle i å formidle betydningen bak budskapet. I Bootstrap 5 kan du utføre denne oppgaven ved hjelp av forskjellige klasser som har blitt diskutert i denne rapporten.
Lage varslingsmeldinger ved hjelp av bootstrap 5
For å opprette en varselmelding i Bootstrap 5, bruk .varsling klasse i kombinasjon med fargeklassene som er gitt for å representere betydningen av varslingsmeldingen. Fargeklassene som kan brukes sammen med .Varslingsklasse er listet nedenfor.
1 ... Alert-Primary
Gir en blå farge som representerer en viktig oppgave.
2… Alert-Success
Gir en grønn farge som representerer suksess.
3… Alert-INFO
Gir en lyseblå farge som indikerer noe informasjon.
4… Varslingsvarsel
Gir en gul farge som representerer en advarsel.
5… Alert-Danger
Gir en rød farge som indikerer fare.
6… Alert-Secondary
Gir en grå farge som representerer en mindre viktig oppgave.
7… Varslingslys
Gir en lysegrå farge til meldingen.
8 ... Alert-Dark
Gir en mørkegrå farge til meldingen.
La oss opprette en varselmelding ved hjelp av Bootstrap 5.
Hvordan generere en bekreftelsesmelding ved å bruke Bootstrap 5
Anta at du vil generere en bekreftelsesmelding når en brukerforespørsel blir behandlet med hell.
Html
Behandlet vellykket! Forespørselen din er behandlet med hell.
Koden over vil generere et bekreftelsesvarsel som informerer brukeren om at forespørselen ble behandlet med suksess.
Produksjon
En bekreftelsesmelding ble generert vellykket.
Hvordan generere en feilmeldingsvarsel ved hjelp av Bootstrap 5
Anta at du vil generere en feilmelding når en brukerforespørsel blir avslått.
Html
Ugyldig! Forespørselen din er avslått.
I kodebiten, må du merke deg at bortsett fra å tilordne meldingen .Varslings-danger-klasse vi også tildeler .Varslings-avispisk klasse sammen med en knapp som har klasse .BTN-Close og Data-BS-Dismiss = “Alert”. Alle disse tre enhetene bidrar til å lage en varslingsmelding som kan lukkes av brukeren.
Produksjon
En avvisbar feilmelding ble generert.
Opprette varsler som lenker
Hvis du ønsker å lage varslingsmeldingene dine som lenker og lede brukerne dine til en annen side eller kilde gjennom disse koblingene, bruker du .Varsling-link Klasse for å gjøre det.
Eksempel
Anta at du vil omdirigere brukeren din til en annen webside, og følg kodebiten nedenfor.
Html
Sjekk ut vår annet tilbud.
Her bruker vi .Varslingsinfo-klasse for å indikere noe informasjon i varslingsmeldingen. Dessuten, som du kan legge merke til at vi kobler en del av meldingen til en annen webside ved å tildele .Varslingsklasse til ankerkoden.
Produksjon
En varslingsmelding har blitt koblet til en annen kilde.
Animerende varsler
Du kan også legge til animasjoner i varslingsmeldingene dine som å inkludere en falmingseffekt ved hjelp av .falme og .forestilling klasser.
Eksempel
Slik kan du legge til en falmingseffekt til varslingsmeldingene dine.
Html
Ikke klikk på lenken mens forespørselen behandler
Koden over sier at varslingsmeldingen vil være en advarsel og vil være avvisbar. Når brukeren lukker meldingen, vil den dessuten ha en falmende effekt.
Produksjon
Varselet ble animert med hell.
Konklusjon
Varsler er i utgangspunktet meldinger eller deler av viss informasjon som krever øyeblikkelig oppmerksomhet til en bruker. I Bootstrap 5 kan du opprette varsler ved hjelp av .varsling Klasse, dessuten for å formidle dens betydning gjennom farger ved å bruke fargeklassene som er tilgjengelige. Ved å bruke klassene levert av Bootstrap 5 kan du gjøre varslene dine avvisbare eller animere dem. Denne rapporten diskuterer varsler i Bootstrap 5 i detalj.