Учебник по Bootstrap 4

BS4 ГЛАВНАЯ BS4 Начать Контейнеры BS4 Базовая сетка BS4 Типография BS4 Цвета BS4 Таблицы BS4 Изображения BS4 BS4 Джамботрон Оповещения BS4 Кнопки БС4 Группы кнопок BS4 Значки BS4 Индикаторы выполнения BS4 Спиннеры BS4 BS4 Пагинация Группы списков BS4 Карты BS4 Выпадающие списки BS4 Свернуть BS4 BS4 Навс BS4 навигационная панель БС4 Формы Входы БС4 Входные группы BS4 Пользовательские формы BS4 BS4 Карусель BS4 модальный Подсказка BS4 BS4 всплывающее окно BS4 Тост BS4 прокрутки Утилиты BS4 BS4 Flex Иконки BS4 Медиа-объекты BS4 Фильтры BS4

Bootstrap 4 Сетка

Сетевая система BS4 BS4 Сложенный/горизонтальный BS4 Сетка XSмаленький BS4 Малая сетка Сетка BS4 средняя BS4 Сетка большая BS4 Сетка XLarge Примеры сетки BS4

Начальная загрузка 4 Другое

Базовый шаблон BS4 Упражнения BS4 Викторина БС4

Начальная загрузка 4 Ссылка

Все классы JS-оповещение JS-кнопка JS Карусель Свернуть JS Выпадающий список JS Модальный JS JS всплывающее окно JS прокрутка Вкладка JS JS тосты JS-подсказка


Предупреждение Bootstrap 4 JS


Предупреждать классы CSS

Учебное пособие по оповещениям см. в нашем учебном пособии по оповещениям Bootstrap .

Class Description Example
.alert Creates an alert message box
.alert-danger Red alert. Indicates a dangerous or potentially negative action
.alert-dark Dark alert. Dark grey alert box
.alert-dismissible Indicates a closable alert box. Together with the .close class, this class is used to close the alert (adds extra padding)
.alert-heading Adds color:inherit to the specified element
.alert-info Light-blue alert.Indicates a neutral informative change or action
.alert-light Light alert. Light grey alert box
.alert-link Used on links inside alerts to provide matching colored links
.alert-primary Blue alert. Indicates an important action
.alert-secondary Grey alert. Indicates a "less" important action
.alert-success Green alert. Indicates a successful or positive action
.alert-warning Yellow alert. Indicates caution should be taken with this action
.close Styles the close button for the alert message (floats right with a specified font-size, color, etc.)

Закрыть оповещения через атрибуты data-*

Добавьте data-dismiss="alert"к ссылке или элементу кнопки, чтобы закрыть предупреждающее сообщение.

Пример

<a href="#" class="close" data-dismiss="alert">&times;</a>

Закрыть оповещения через JavaScript

Закрыть вручную с помощью:

Пример

$('.close').alert("close");

Параметры оповещения

None

Методы оповещения

В следующей таблице перечислены все доступные методы оповещения.

Method Description Try it
.alert("close") Closes the alert message
.alert("dispose") Destroys an element's alert.

Оповещения о событиях

В следующей таблице перечислены все доступные события предупреждений.

Event Description Try it
close.bs.alert Occurs when the alert message is about to be closed
closed.bs.alert Occurs when the alert message has been closed (will wait for CSS transitions to complete)