Alarmy Bootstrap 4
Alarmy Bootstrap 4
Bootstrap 4 zapewnia łatwy sposób tworzenia predefiniowanych komunikatów alarmowych:
Alerty są tworzone z klasą, po której następuje .alertjedna z klas kontekstowych .alert-success, .alert-info, .alert-warning,
.alert-danger, .alert-primary, .alert-secondarylub .alert-light:.alert-dark
Przykład
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>
Linki do alertów
Dodaj alert-linkklasę do dowolnych linków w polu alertu, aby utworzyć „pasujące kolorowe linki”:
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
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">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
Wskazówka: × (×) 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
Klasy .fadei .showdodają efekt zanikania podczas zamykania komunikatu ostrzegawczego:
Przykład
<div class="alert alert-danger
alert-dismissible fade show">
Uzupełnij informacje o alertach Bootstrap 4
Aby uzyskać pełne informacje na temat wszystkich opcji, metod i zdarzeń alertów, przejdź do naszego podręcznika Bootstrap 4 JS Alert Reference .