HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Alarmy Bootstrap

❮ Poprzedni Następny ❯

Alerty

Bootstrap zapewnia łatwy sposób tworzenia predefiniowanych komunikatów alarmowych:

× Powodzenie! To pole alertu wskazuje pomyślną lub pozytywną akcję.
× Informacje! To pole alertu wskazuje neutralną zmianę informacyjną lub działanie.
× Ostrzeżenie! To pole alertu wskazuje ostrzeżenie, które może wymagać uwagi.
× Niebezpieczeństwo! To pole alertu wskazuje na niebezpieczne lub potencjalnie negatywne działanie.

Alerty są tworzone z .alertklasą, po której następuje jedna z czterech klas kontekstowych .alert-success, lub :.alert-info.alert-warning.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>

Linki do alertów

Dodaj alert-linkklasę do dowolnych linków w polu alertu, aby utworzyć „pasujące kolorowe linki”:

Powodzenie! Powinieneś przeczytać tę wiadomość .
Informacje! Powinieneś przeczytać tę wiadomość .
Ostrzeżenie! Powinieneś przeczytać tę wiadomość .
Niebezpieczeństwo! Powinieneś przeczytać tę wiadomość .

Przykład

<div class="alert alert-success">
  <strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>

Powiadomienia o zamknięciu

× Kliknij symbol „x” po prawej stronie, aby mnie zamknąć.

Aby zamknąć komunikat alertu, dodaj .alert-dismissible klasę do kontenera alertu. Następnie dodaj class="close"i data-dismiss="alert" do linku lub elementu przycisku (po kliknięciu tego okienka ostrzeżenia zniknie).

Przykład

<div class="alert alert-success alert-dismissible">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

Atrybut aria-* i × wyjaśnienie

Aby poprawić dostępność dla osób korzystających z czytników ekranu, podczas tworzenia przycisku zamykania należy uwzględnić atrybut aria-label="close".

&czasy; (×) to jednostka HTML, która jest preferowaną ikoną przycisków zamykania, a nie literą „x”.
Aby zapoznać się z listą wszystkich jednostek HTML, odwiedź naszą Odniesienie do jednostek HTML .

Animowane alerty

× Kliknij symbol „x” po prawej stronie, aby mnie zamknąć. „Zniknę”.

Klasy .fadei .indodają efekt zanikania podczas zamykania komunikatu ostrzegawczego:

Przykład

<div class="alert alert-danger fade in">

Sprawdź się za pomocą ćwiczeń

Ćwiczenie:

Dodaj klasę Bootstrap „alert”, aby wyświetlić wynik pomyślnej akcji.

<div class="">
  Success!
</div>

Kompletna informacja o alarmie Bootstrap

Aby uzyskać pełne informacje o wszystkich opcjach, metodach i zdarzeniach alertów, przejdź do naszego podręcznika Bootstrap JS Alert Reference .


❮ Poprzedni Następny ❯