Bootstrap 5 toast

Toast (bröd)

Komponenten Toast liknar en varning, som endast visas några sekunder vid vissa händelser (t.ex. när användaren klickar på en knapp, skickar ett formulär osv.).

Hur man skapar Toast

För att skapa Toast, använd .toast klasser, och lägg till .toast-header och .toast-body.

Observera:Som standard är toast dold. Om du vill visa den, använd .show klass. Om du vill stänga den, använd <button>-elementet och lägg till 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 i Toast-kroppen.
  </div>
</div>

Prova själv

Öppna Toast

För att visa Toast genom att klicka på en knapp måste du initialisera den med JavaScript: Välj det specificerade elementet och anropa toast() Metoder.

När du klickar på knappen kommer följande kod att visa alla toast i dokumentet:

Exempel

<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>

Prova själv