Bootstrap 4 Alerts
Оповещения Bootstrap 4
Bootstrap 4 предоставляет простой способ создания предопределенных оповещений:
Оповещения создаются с помощью .alert класса, за которым следует один из контекстных классов,,,,,, .alert-success .alert-info .alert-warning .alert-danger .alert-primary .alert-secondary .alert-light или .alert-dark:
Пример
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>
Оповещения ссылки
Добавьте alert-link класс к любым ссылкам внутри окна оповещения, чтобы создать "совпадающие цветные ссылки":
Пример
<div class="alert alert-success">
<strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
Закрытие оповещений
Чтобы закрыть предупреждение, добавьте .alert-dismissible класс в контейнер оповещений. После этого добавьте class="close" и data-dismiss="alert" к соединению или элементу кнопки (когда вы щелкаете дальше это окно предупреждения исчезнет).
Пример
<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>
Совет: & раз; (×) — это объект HTML, который является предпочтительным значком для кнопок закрытия, а не буквы «x».
Список всех HTML-сущностей, посетите нашу ссылку HTML сущности.
Анимированные оповещения
.fade и .show классы добавляет эффект затухания при закрытии сообщения предупреждения:
Пример
<div class="alert alert-danger
alert-dismissible fade show">
Полный справочник оповещение Bootstrap 4
Для полной справки всех вариантов оповещения, методы и события, перейдите на наш Ссылка на оповещение Bootstrap 4 JS.