A Toast ist wie eine Push -Benachrichtigung oder eine Art Warnbox, die einige Sekunden auf einem Bildschirm angezeigt wird, wenn einige Aktionen durchgeführt werden und nach 5 Sekunden automatisch verschwindet. Toasts werden mit Flexbox erstellt, was bedeutet, dass Sie sie leicht als Anforderung ausrichten und positionieren können.

Dieser Artikel soll Ihnen das Wissen darüber vermitteln

• Toast erstellen
• Positionierung des Toasts
• Stapelter Toast
• Datenattribute für den Toast

Toast erstellen

Um einen Toast zu erstellen, nehmen Sie zwei Divs mit der Klasse .Toast-Header, .Toastkörper und Wickel sie in einem mit der Klasse .Toast, Geben Sie auch eine einzigartige Ausweis zu diesem div. Dann benutze das Ausweis Verbinden Sie einen Knopf mit Toast, der den Toast auslöst.

Code

Grundtoast

<Toast

Toast -Header

In diesem Artikel geht es um Bootstrap 5 Toasts.

So wird ein Basis -Toast erstellt.

Den Toast positionieren

Um einen Toast überall auf einem Bildschirm zu positionieren, können Sie einfach CSS -Positionierungseigenschaften verwenden, um Ihren Toast überall auf einem Bildschirm anzuzeigen.

Code

Toast -Header

In diesem Artikel geht es um Bootstrap 5 Toasts.

Wie Sie im obigen Beispiel sehen, habe ich meinen Toast mit Inline -CSS in der unteren rechten Ecke platziert.

Stapelte Toast

In Bootstrap 5 können Sie die Toast auch stapeln, wenn es mehr als einen Toast gibt. Einen Toast einfach stapeln

Fügen Sie mehrere Toasts in einem einzigen hinzu und geben Sie die Position nach Ihrer Wahl.

Code

Toast -Header

In diesem Artikel geht es um Bootstrap 5 Toasts.

Toast -Header

In diesem Artikel geht es um Bootstrap 5 Toasts.

So stapeln Sie Toasts.

Datenattribute für Toast

Wenn Sie Ihren Toast nicht automatisch verbergen möchten, verwenden Sie Data-autohide = "False" Attribut mit .Toastklasse und wenn Sie möchten, dass Ihr Toast länger bleibt, dann verwenden Sie Data-delay = "Wert in Millisekunden" Attribut wie 3000 = 3 Sekunden. Standardmäßig beträgt der Wert der Verzögerung 1000 Millisekunden, aber Sie können sich ändern, indem Sie das Data-Delay-Attribut verwenden.

Code

Toast -Header

In diesem Artikel geht es um Bootstrap 5 Toasts.

Toast -Header

In diesem Artikel geht es um Bootstrap 5 Toasts.

Da Sie den Unterschied im obigen Beispiel deutlich sehen, verbirgt sich der erste Toast nach 3 automatisch.5 Sekunden, während der zweite Toast bleibt Data-autohide = ”False” Attribut.

Abschluss

Toast werden mit a erstellt mit .Toastklasse, Dann wickeln Sie .Toast-Header Div Und .Toast-Körper Div im Inneren .Toast Div. Um einen Toast zu öffnen, können Sie verwenden .zeigen Klasse mit .Toastklasse Oder Sie können einen JavaScript -Code schreiben, um ihn zu öffnen, indem Sie geben Ausweis zum .Toastklasse.Toast sind standardmäßig verborgen .Showunterricht.