Powiadomienia
Bootstrap pozwala w łatwy sposób na tworzenie predefiniowanych wiadomości alarmowych:
Alarmy są tworzone z .alert
klasy, a następnie jedną z czterech klas kontekstowych .alert-success
, .alert-info
, .alert-warning
lub .alert-danger
:
Przykład
<div class="alert alert-success">
<strong>Success!</strong>
Indicates a successful or positive action.
</div>
<div class="alert alert-info">
<strong>Info!</strong> Indicates a neutral informative change or action.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> Indicates a warning that might need attention.
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> Indicates a dangerous or potentially negative
action.
</div>
Spróbuj sam " Alarmy zamykające
Aby zamknąć komunikat ostrzegawczy, dodać class="close"
i data-dismiss="alert"
do łącza lub elementu przycisku:
Przykład
<div class="alert alert-success">
<a href="#"
class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
Spróbuj sam " aria-* atrybut i × wyjaśnienie
Aby przyczynić się do poprawy dostępności dla osób korzystających z czytników ekranowych, powinien zawierać aria-label="close" atrybut, podczas tworzenia przycisk zamykania.
× (×) × (×) jest podmiotem HTML, który jest preferowanym ikona bliskich przyciskami, zamiast litery "x" .
animowane Alerts
.fade
I .in
klasy dodaje efekt blaknięcia podczas zamykania komunikat:
Sprawdź się z ćwiczeń!
Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 »
Wypełnij Bootstrap Alert Reference
Pełną odniesieniu do wszystkich opcji alertów, metod i zdarzeń, przejdź do naszej Bootstrap JS Alert Reference .