A toast jest jak powiadomienie push lub rodzaj pole alertu, które pojawia się na ekranie przez kilka sekund, gdy pewna akcja jest wykonywana i znika automatycznie po 5 sekundach. Tosty są budowane za pomocą FlexBox, co oznacza, że ​​możesz je łatwo wyrównać i ustawić jako wymagania.

Ten artykuł ma na celu udzielenie wiedzy o

• Tworzenie tostów
• Pozycjonowanie tostów
• Ułożone tosty
• Atrybuty danych dla tostów

Tworzenie tostów

Aby utworzyć toast, weź dwie Divy z klasą .TOast-Header, .Toast-ciało i opakowanie one wewnątrz z klasą .toast, Daj także wyjątkowe ID do tego div. Następnie użyj tego ID Aby podłączyć przycisk z tostem, który wywoła tost.

Kod

Podstawowy tost

<Toast

Nagłówek tostów

Ten artykuł dotyczy 5 tostów Bootstrap 5.

W ten sposób powstaje podstawowy tost.

Pozycjonowanie tostu

Aby ustawić toast w dowolnym miejscu na ekranie, możesz po prostu użyć właściwości pozycjonowania CSS, aby pokazać toast w dowolnym miejscu na ekranie.

Kod

Nagłówek tostów

Ten artykuł dotyczy 5 tostów Bootstrap 5.

Jak widać w powyższym przykładzie, położyłem toast w prawym dolnym rogu przy użyciu wbudowanego CSS.

Ułożone tosty

W Bootstrap 5 możesz również układać tosty, jeśli jest więcej niż jeden tost. Aby po prostu układać tosty

Dodaj wiele tostów w jednym i daj pozycję zgodnie z wyborem.

Kod

Nagłówek tostów

Ten artykuł dotyczy 5 tostów Bootstrap 5.

Nagłówek tostów

Ten artykuł dotyczy 5 tostów Bootstrap 5.

W ten sposób układasz tosty.

Atrybuty danych Toast

Jeśli nie chcesz automatycznie ukrywać toast, użyj atrybut data-autohide = „false” z .klasa tostów, a jeśli chcesz, aby twój toast został dłużej, użyj atrybut data-delay = „wartość w milisekundach” jak 3000 = 3SEC. Domyślnie wartość opóźnienia wynosi 1000 milisekund, ale możesz zmienić za pomocą atrybutu opóźnienia danych.

Kod

Nagłówek tostów

Ten artykuł dotyczy 5 tostów Bootstrap 5.

Nagłówek tostów

Ten artykuł dotyczy 5 tostów Bootstrap 5.

Jak wyraźnie widzisz różnicę w powyższym przykładzie, pierwszy tosty ukrywa się automatycznie po 3.5 sekund, podczas gdy drugi toast pozostaje z powodu atrybut data-autohide = ”false”.

Wniosek

Tosty są tworzone za pomocą z .klasa tostów, Następnie owinąć .Toast-Header Div I .Div toast-ciało w środku .Toast div. Aby otworzyć toast, możesz użyć .pokazywać klasa z .klasa tostów lub możesz napisać kod JavaScript, aby go otworzyć, podając ID do .klasa tostów.Tosty są domyślnie ukryte .Pokaż klasę.