Dostarczaj kontekstowe komunikaty zwrotne dotyczące typowych działań użytkownika za pomocą kilku dostępnych i elastycznych komunikatów ostrzegawczych.
Przykłady
Alerty są dostępne dla dowolnej długości tekstu, a także opcjonalny przycisk odrzucania. W celu poprawnej stylizacji użyj jednej z ośmiu wymaganych klas kontekstowych (np .alert-success. ). W celu odrzucenia wbudowanego użyj wtyczki alerts jQuery .
Prosty alert główny — sprawdź!
Prosty alarm pomocniczy — sprawdź!
Prosty alert o sukcesie — sprawdź to!
Prosty alert o niebezpieczeństwie — sprawdź to!
Prosty alert ostrzegawczy — sprawdź to!
Prosty alert informacyjny — sprawdź to!
Prosty alert świetlny — sprawdź to!
Prosty ciemny alert — sprawdź to!
Nadawanie znaczenia technologiom wspomagającym
Użycie koloru w celu dodania znaczenia zapewnia jedynie wizualne wskazanie, które nie zostanie przekazane użytkownikom technologii wspomagających – takich jak czytniki ekranu. Upewnij się, że informacje oznaczone kolorem są oczywiste z samej treści (np. widoczny tekst) lub są zawarte w inny sposób, np. dodatkowy tekst ukryty z .sr-onlyklasą.
Kolor linku
Użyj .alert-linkklasy narzędziowej, aby szybko dostarczyć pasujące kolorowe linki w dowolnym alercie.
Alerty mogą również zawierać dodatkowe elementy HTML, takie jak nagłówki, akapity i separatory.
Bardzo dobrze!
Oj tak, pomyślnie przeczytałeś ten ważny komunikat ostrzegawczy. Ten przykładowy tekst będzie działał nieco dłużej, aby można było zobaczyć, jak odstępy w alercie działają w przypadku tego rodzaju treści.
Zawsze, gdy zajdzie taka potrzeba, korzystaj z narzędzi do tworzenia marginesów, aby utrzymać porządek i porządek.
Odrzucanie
Korzystając z wtyczki alertów JavaScript, możliwe jest odrzucenie dowolnego alertu w tekście. Oto jak:
Upewnij się, że załadowałeś wtyczkę alertu lub skompilowany skrypt Bootstrap JavaScript.
Jeśli budujesz nasz JavaScript ze źródeł, wymagautil.js to . Skompilowana wersja zawiera to.
Dodaj przycisk odrzucenia i .alert-dismissibleklasę, która dodaje dodatkowe wypełnienie po prawej stronie alertu i ustawia .closeprzycisk.
Na przycisku odrzuć dodaj data-dismiss="alert"atrybut, który uruchamia funkcjonalność JavaScript. Upewnij się, że używasz z <button>nim elementu, aby zapewnić prawidłowe działanie na wszystkich urządzeniach.
Aby animować alerty podczas ich odrzucania, pamiętaj o dodaniu klas .fadei ..show
Możesz to zobaczyć w akcji dzięki demonstracji na żywo:
Święty guacamole! Powinieneś sprawdzić niektóre z tych pól poniżej.
zachowanie JavaScript
Wyzwalacze
Włącz odrzucanie alertu przez JavaScript:
Lub z dataatrybutami na przycisku w alercie , jak pokazano powyżej:
Pamiętaj, że zamknięcie alertu spowoduje jego usunięcie z DOM.
Metody
metoda
Opis
$().alert()
Sprawia, że alert nasłuchuje zdarzeń kliknięcia na elementach potomnych, które mają ten data-dismiss="alert"atrybut. (Nie jest to konieczne w przypadku korzystania z automatycznej inicjalizacji interfejsu API danych).
$().alert('close')
Zamyka alert, usuwając go z DOM. Jeśli klasy .fadei .showsą obecne w elemencie, alert zniknie, zanim zostanie usunięty.
$().alert('dispose')
Niszczy alarm elementu.
Wydarzenia
Wtyczka alertu Bootstrap udostępnia kilka zdarzeń, które można podłączyć do funkcji alertów.
Wydarzenie
Opis
close.bs.alert
To zdarzenie jest wyzwalane natychmiast po closewywołaniu metody wystąpienia.
closed.bs.alert
To zdarzenie jest wywoływane po zamknięciu alertu (poczeka na zakończenie przejścia CSS).