Bootstrap JS-Toasts
Toast CSS-Klassen
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.).
Ein Tutorial zu Toasts finden Sie in unserem Bootstrap Toast Tutorial .
| Class | Description | Example |
|---|---|---|
.toast |
Creates the toast | |
.toast-header |
Creates the toast header | |
.toast-body |
Creates the toast body |
Per JavaScript aktivieren
Toasts müssen mit jQuery initialisiert werden: Wählen Sie das angegebene Element aus und rufen Sie die toast()Methode auf.
Beispiel
<script>
$(document).ready(function(){
$('.toast').toast('show');
});
</script>
Toast-Optionen
Optionen können über Datenattribute oder JavaScript übergeben werden. Hängen Sie für Datenattribute den Optionsnamen an data-, wie in data-animation="".
| Name | Type | Default | Description | Try it |
|---|---|---|---|---|
| animation | boolean | true |
Specifies whether to add a CSS fade transition effect when showing and hiding the toast.
|
|
| autohide | boolean | true | Specifies whether to hide the toast by default | |
| delay | number | 500 | Specifies the number of milliseconds it will take to hide the toast once it is shown. |
Toastmethoden
In der folgenden Tabelle sind alle verfügbaren Toastmethoden aufgeführt.
| Method | Description | Try it |
|---|---|---|
| .toast(options) | Activates the toast with an option. See options above for valid values | |
| .toast("show") | Shows the toast | |
| .toast("hide") | Hides the toast | |
| .toast("dispose") | Hides and destroys the toast |
Toast-Events
In der folgenden Tabelle sind alle verfügbaren Toastereignisse aufgeführt.
| Event | Description | Try it |
|---|---|---|
| show.bs.toast | Occurs when the toast is about to be shown | |
| shown.bs.toast | Occurs when the toast is fully shown (after CSS transitions have completed) | |
| hide.bs.toast | Occurs when the toast is about to be hidden | |
| hidden.bs.toast | Occurs when the toast is fully hidden (after CSS transitions have completed) |