Bootstrap-4 -Toast
Bootstrap-4-Toast
Die Toast-Komponente ist wie eine Warnbox, die nur für ein paar Sekunden angezeigt wird, wenn etwas passiert (dh wenn der Benutzer auf eine Schaltfläche klickt, ein Formular absendet usw.).
So erstellen Sie einen Toast
Um einen Toast zu erstellen, verwenden Sie die .toastKlasse und fügen Sie a .toast-headerund a
.toast-bodydarin hinzu:
<div class="toast">
<div class="toast-header">
Toast Header
</div>
<div class="toast-body">
Some text inside the toast body
</div>
</div>
Hinweis: Toasts müssen mit jQuery initialisiert werden: Wählen Sie das angegebene Element aus und rufen Sie die toast()Methode auf.
Der folgende Code zeigt alle "Toasts" im Dokument:
Beispiel
<script>
$(document).ready(function(){
$('.toast').toast('show');
});
</script>
Toast ein- und ausblenden
Toasts sind standardmäßig ausgeblendet. Verwenden Sie das data-autohide="false"
Attribut, um es standardmäßig anzuzeigen. Um es zu schließen, verwenden Sie ein <button> -Element und fügen Sie hinzu data-dismiss="toast":
Beispiel
<div class="toast" data-autohide="false">
<div class="toast-header">
<strong class="mr-auto text-primary">Toast Header</strong>
<small class="text-muted">5 mins ago</small>
<button
type="button" class="ml-2 mb-1 close" data-dismiss="toast">×</button>
</div>
<div class="toast-body">
Some text
inside the toast body
</div>
</div>
Beachten Sie die Klassen mr-auto, ml-2und ? mb-1Sie werden verwendet, um bestimmte Ränder hinzuzufügen. Mehr darüber erfahren Sie im Kapitel Bootstrap 4 Utilities .
Vollständige Bootstrap-Toast-Referenz
Eine vollständige Referenz aller Toast-Optionen, -Methoden und -Ereignisse finden Sie in unserer Bootstrap JS Toast-Referenz .