Alerty w Bootstrap 5 | Wyjaśnione
Dawanie tych czujnych komunikatów określony styl jest również ważny, ponieważ styl ten odgrywa ważną rolę w przekazywaniu znaczenia przekazu. W Bootstrap 5 możesz wykonać to zadanie za pomocą różnych klas, które zostały omówione w tym raporcie.
Wykonanie komunikatów o alercie za pomocą Bootstrap 5
Aby utworzyć komunikat alarmowy w Bootstrap 5, użyj .alarm Klasa w połączeniu z klasami kolorów dostarczonymi w celu przedstawienia znaczenia wiadomości ostrzegawczej. Klasy kolorów, które można wykorzystać wraz z .Klasa alertów jest wymieniona poniżej.
1… Ustanawiający Primary
Zapewnia niebieski kolor reprezentujący ważne zadanie.
2… Ustanowienie czujności
Zapewnia zielony kolor reprezentujący sukces.
3… alert-info
Daje jasnoniebieski kolor wskazujący na pewne informacje.
4… Zachęcanie czujności
Zapewnia żółty kolor reprezentujący ostrzeżenie.
5… Niebezpieczeństwo czujności
Daje czerwony kolor wskazujący niebezpieczeństwo.
6… ostrzeżenie-sekundowe
Zapewnia szary kolor reprezentujący mniej ważne zadanie.
7… Light alert
Daje komunikat jasnoszary kolor.
8… Alarm-Dark
Zapewnia komunikat ciemnoszary kolor.
Utwórzmy komunikat o alercie za pomocą Bootstrap 5.
Jak wygenerować powiadomienie o komunikacie potwierdzającym za pomocą Bootstrap 5
Załóżmy, że chcesz wygenerować komunikat potwierdzający, gdy żądanie użytkownika jest pomyślnie przetwarzane.
Html
Przetworzone pomyślnie! Twoja prośba została pomyślnie przetworzona.
Powyższy kod wygeneruje powiadomienie o potwierdzeniu informujące użytkownika, że złożone żądanie zostało pomyślnie przetworzone.
Wyjście
Komunikat potwierdzający został pomyślnie wygenerowany.
Jak wygenerować powiadomienie o komunikacie o błędzie za pomocą Bootstrap 5
Załóżmy, że chcesz wygenerować komunikat o błędzie, gdy żądanie użytkownika zostanie odrzucone.
Html
Nieważny! Twoja prośba została odrzucona.
W fragmencie kodu należy zauważyć, że oprócz przypisania wiadomości .klasa ostrzegawcza, którą również przypisujemy .klasa ostrzeżna wraz z przyciskiem posiadającym klasę .BTN-CLOSE i DATE-BS-DISMISS = „Alert”. Wszystkie trzy z tych podmiotów przyczyniają się do nawiązania wiadomości ostrzegawczej, którą użytkownik może zostać zamknięty.
Wyjście
Wygenerowano komunikat o błędzie zwolnienia.
Tworzenie alertów jako linków
Jeśli chcesz tworzyć wiadomości powiadomień jako linki i skierować użytkowników do innej strony lub źródła za pośrednictwem tych linków, użyj .Link alarmowy klasa, aby to zrobić.
Przykład
Załóżmy, że chcesz przekierować użytkownika na inną stronę internetową, a następnie śledź kodowy fragment poniżej.
Html
Sprawdź nasze inna oferta.
Tutaj używamy .Klasa alert-info w celu wskazania niektórych informacji zawartych w komunikacie alert. Ponadto, jak zauważysz, że łączymy część wiadomości z inną stroną internetową, przypisując .klasa alert-link do znacznika kotwicy.
Wyjście
Wiadomość ostrzegawcza została powiązana z innym źródłem.
Animujące alerty
Możesz także dodać animacje do swoich komunikatów alertów, takich jak uwzględnienie efektu zanikającego za pomocą .znikać I .pokazywać zajęcia.
Przykład
Oto jak możesz dodać efekt zanikający do wiadomości powiadomień.
Html
Nie klikaj linku podczas przetwarzania żądania
Powyższy kod stwierdza, że wiadomość ostrzegawcza będzie ostrzeżeniem i będzie dystansowa. Ponadto, gdy użytkownik zamknie wiadomość, będzie miała efekt zanikający.
Wyjście
Alert został pomyślnie animowany.
Wniosek
Alerty to w zasadzie wiadomości lub informacje o pewnych informacji, które wymagają natychmiastowej uwagi użytkownika. W Bootstrap 5 możesz tworzyć alerty za pomocą .alarm Co więcej, aby przekazać swoje znaczenie poprzez kolory za pomocą dostępnych klas kolorów. Ponadto, korzystając z klas dostarczonych przez Bootstrap 5. W tym raporcie szczegółowo omawia powiadomienia w Bootstrap 5.