Предупреждения Bootstrap 4
Предупреждения 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 .