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.