Bootstrap - Toasts: Ein freundlicher Leitfaden für Anfänger

Hallo da draußen, zukünftige Web-Entwickler! Heute tauchen wir ein in die wunderbare Welt der Bootstrap Toasts. Keine Sorge, wenn du vorher noch nie von ihnen gehört hast – bis zum Ende dieses Tutorials wirst du wie ein Profi toasten! ?

Bootstrap - Toasts

Was sind Bootstrap Toasts?

Bevor wir loslegen, lassen Sie uns darüber sprechen, was Toasts sind. Stell dir vor, du benutzt eine mobile App und plötzlich erscheint eine kleine Benachrichtigung an der unteren Ecke deines Bildschirms. Genau das ist ein Toast in der Web-Entwicklung! Es ist eine leichte Benachrichtigung, die den Push-Benachrichtigungen auf mobilen Geräten nachahmt.

Grundlegender Toast

Lassen Sie mit einem grundlegenden Toast beginnen. Hier ist, wie er im Code aussieht:

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>vor 11 Minuten</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Schließen"></button>
</div>
<div class="toast-body">
Hallo, Welt! Dies ist eine Toast-Nachricht.
</div>
</div>

Lassen Sie uns das auseinandernehmen:

Der äußere div mit der Klasse toast ist unser Hauptcontainer.
Innen haben wir einen toast-header und einen toast-body.
Der Header enthält typischerweise ein Bild, einen Titel, eine Zeitangabe und einen Schließen-Button.
Der Body ist der Ort für unsere Hauptnachricht.

Live Toast

Jetzt lassen wir unseren Toast lebendig werden! Dazu benötigen wir ein bisschen JavaScript:

<button type="button" class="btn btn-primary" id="liveToastBtn">Live Toast anzeigen</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>vor 11 Minuten</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Schließen"></button>
</div>
<div class="toast-body">
Hallo, Welt! Dies ist eine live Toast-Nachricht.
</div>
</div>
</div>

<script>
const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
toastTrigger.addEventListener('click', () => {
const toast = new bootstrap.Toast(toastLiveExample)
toast.show()
})
}
</script>

Hier haben wir einen Button hinzugefügt, der, wenn er angeklickt wird, unseren Toast anzeigt. Das JavaScript am Ende horcht auf den Klick und zeigt den Toast an.

Transluzenter Toast

Möchtest du deinen Toast ein bisschen durchsichtig machen? Füge einfach die Klasse bg-light hinzu:

<div class="toast bg-light" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>vor 11 Minuten</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Schließen"></button>
</div>
<div class="toast-body">
Hallo, Welt! Dies ist ein transluzenter Toast.
</div>
</div>

Stapelbare Toasts

Was ist, wenn du mehrere Toasts anzeigen möchtest? Kein Problem! Bootstrap stapelt sie ordentlich:

<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>gerade eben</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Schließen"></button>
</div>
<div class="toast-body">
Siehst du? Genau so.
</div>
</div>

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>vor 2 Sekunden</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Schließen"></button>
</div>
<div class="toast-body">
Achtung, Toasts stapeln sich automatisch
</div>
</div>
</div>

Individuelle Inhalte

Toasts sind nicht auf nur Text beschränkt. Du kannst jede HTML-Inhalt hinzufügen, die du möchtest:

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">
Hallo, Welt! Dies ist eine Toast-Nachricht.
<div class="mt-2 pt-2 border-top">
<button type="button" class="btn btn-primary btn-sm">Aktion ausführen</button>
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Schließen</button>
</div>
</div>
</div>

Hier haben wir Buttons zu unserem Toast-Body hinzugefügt. Sei kreativ!

Farbschemata

Toasts können in verschiedenen Farben erscheinen, um das Farbschema deiner Website zu ergänzen oder verschiedene Arten von Nachrichten anzuzeigen:

<div class="toast bg-primary text-white" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Bootstrap</strong>
<small>vor 11 Minuten</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Schließen"></button>
</div>
<div class="toast-body">
Hallo, Welt! Dies ist ein primärer Toast.
</div>
</div>

Du kannst bg-primary durch bg-success, bg-danger, bg-warning, etc. ersetzen.

Platzierung von Toasts

Toasts können überall auf deiner Seite platziert werden. Hier ist, wie man sie in die obere rechte Ecke platzieren kann:

<div aria-live="polite" aria-atomic="true" class="position-relative">
<div class="toast-container position-absolute top-0 end-0 p-3">
<!-- Dein Toast hier -->
</div>
</div>

Barrierefreiheit

Barrierefreiheit ist entscheidend! Achte immer darauf, die Attribute role="alert" und aria-live="assertive" hinzuzufügen, damit Screen-Reader deine Toasts korrekt ankündigen können.

Hier ist eine Tabelle, die die wichtigsten Toast-Methoden zusammenfasst:

Methode	Beschreibung
show()	Zeigt den Toast
hide()	Versteckt den Toast
dispose()	Versteckt den Toast und entfernt ihn aus dem DOM

Und das war's! Ahora bist du ein Toast-Meister. Denke daran, Übung macht den Meister, also versuche, diese in dein nächstes Projekt zu integrieren. Viel Spaß beim Coden! ?

Credits: Image by storyset

Vorheriges Tutorial:

Bootstrap - Ladeindikatoren

Nächstes Tutorial:

Bootstrap - Tooltips