EN skål er som en pushvarsel eller en slags varslingsboks som vises på en skjerm i noen sekunder når noe handling utføres og forsvinner automatisk etter 5 sekunder. Toasts er bygget med Flexbox som betyr at du kan justere dem enkelt som krav.

Denne artikkelen er designet for å gi deg kunnskapen om

• Skape toast
• Plassering av toasten
• Stablet toast
• Dataattributter for toasten

Skape toast

For å lage en toast, ta to div med klassen .Toast-header, .Toast-body and wrap dem inne i en med klassen .skål, Gi også en unik id til denne div. Bruk deretter dette id For å koble en knapp med toast som vil utløse toasten.

Kode

Grunnleggende toast

<Skål

Toast Header

Denne artikkelen handler om bootstrap 5 toasts.

Slik opprettes en grunnleggende toast.

Plassering av toasten

For å plassere en toast hvor som helst på en skjerm, kan du ganske enkelt bruke CSS -posisjoneringsegenskaper for å vise toast hvor som helst på en skjerm.

Kode

Toast Header

Denne artikkelen handler om bootstrap 5 toasts.

Som du ser i eksemplet ovenfor, plasserte jeg toasten min nederst til høyre ved å bruke Inline CSS.

Stablet toasts

I Bootstrap 5 kan du også stable toasts hvis det er mer enn en toast. Å stable en toast ganske enkelt

Legg til flere toasts i en enkelt og gi posisjon i henhold til ditt valg.

Kode

Toast Header

Denne artikkelen handler om bootstrap 5 toasts.

Toast Header

Denne artikkelen handler om bootstrap 5 toasts.

Slik stabler du toasts.

Dataattributter for toast

Hvis du ikke vil skjule toast automatisk, så bruk Data-AutoHide = “False” attributt med .Toasteklasse, og hvis du vil at toast skal bli lenger, bruk Data-Delay = “Verdi i Milliseconds” attributt som 3000 = 3sec. Som standard er verdien av forsinkelse 1000 millisekunder, men du kan endres ved å bruke data-forsinkelsesattributt.

Kode

Toast Header

Denne artikkelen handler om bootstrap 5 toasts.

Toast Header

Denne artikkelen handler om bootstrap 5 toasts.

Som du tydelig ser forskjellen i eksemplet ovenfor, skjuler den første toast automatisk etter 3.5 sekunder, mens den andre toasten gjenstår på grunn av data-autohide = ”falsk” attributt.

Konklusjon

Toasts opprettes ved hjelp av en med .Toasteklasse, deretter pakk inn .Toast-header div og .Toast-body div inne .Toast Div. For å åpne en toast kan du bruke .forestilling klasse med .Toasteklasse eller du kan skrive en JavaScript -kode for å åpne den ved å gi id til .Toasteklasse.Toasts er skjult som standard, det er derfor vi bruker .Vis klasse.