Najnowsze tutoriale tworzenie stron internetowych
 

Bootstrap Alerts


Powiadomienia

Bootstrap pozwala w łatwy sposób na tworzenie predefiniowanych wiadomości alarmowych:

× Sukces! Ten alert box wskazuje udanej lub pozytywnego działania.
× informacji! Ten alert box wskazuje neutralną zmianę informacyjny lub działania.
X Uwaga! Ten alert box oznacza ostrzeżenie, które mogą wymagać uwagi.
× Niebezpieczeństwo! Ten alert box wskazuje na niebezpieczną lub potencjalnie negatywnego działania.

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">&times;</a>
  <strong>Success!</strong> Indicates a successful or positive action.
</div>
Spróbuj sam "

aria-* atrybut i &times; 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.

&times; (×) &times; (×) 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:

Przykład

<div class="alert alert-success fade in">
Spróbuj sam "

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 .