Bootstrap 5-Toast

Toast (Brötchen)

Das Toast-Element ähnelt einer Warnbox und wird nur für einige Sekunden angezeigt, wenn etwas passiert (z.B. wenn der Benutzer auf eine Schaltfläche klickt oder ein Formular einreicht).

Wie man Toast erstellt

Um Toast zu erstellen, verwenden Sie .toast Klassen und fügen Sie .toast-header und .toast-body.

Hinweis:Standardmäßig ist Toast versteckt. Um es anzuzeigen, verwenden Sie .show Klasse. Um es zu schließen, verwenden Sie das <button>-Element und fügen Sie data-bs-dismiss="toast":

<div class="toast show">
  <div class="toast-header">
    Toast-Titel
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    Text im Toast-Hauptteil.
  </div>
</div>

Probieren Sie es selbst aus

Öffnen Sie Toast

Um Toast durch Klicken auf eine Schaltfläche anzuzeigen, müssen Sie sie mit JavaScript initialisieren: Wählen Sie das angegebene Element aus und rufen Sie toast() Methoden.

Wenn Sie auf die Schaltfläche klicken, zeigt der folgende Code alle Toast-Nachrichten in der Dokumentation an:

Beispiel

<script>
document.getElementById("toastbtn").onclick = function() {
  var toastElList = [].slice.call(document.querySelectorAll('.toast'))
  var toastList = toastElList.map(function(toastEl) {
    return new bootstrap.Toast(toastEl)
  })
  toastList.forEach(toast => toast.show())
}
</script>

Probieren Sie es selbst aus