Уведомления Bootstrap 4

Предоставляйте контекстные сообщения обратной связи для типичных действий пользователя с помощью доступных и гибких предупреждающих сообщений.

Примеры

Уведомления доступны для любой длины как текста, так и опциональной кнопки отмены. Для правильной стилизации используйте один из 8 требуемых контекстуальных классов (например, .alert-success). Для строчного отклонения используйте плагин уведомлений jQuery.

<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert—check it out!
</div>
Использование вспомогательных технологий

Использование цвета как дополнительного инструмента информативности доступно только в визуальной сфере, что ограничивает пользователей вспомогательных технологий, например, программ для чтения текста с экрана. Удостоверьтесь, что информация, обозначенная цветом, также доступна из самого контента (т.е. в тексте) или содержится в альтернативных средствах – таких как дополнительный скрытый в классе .sr-only текст.

Используйте класс .alert-link для соответствия цвета ссылок цветам уведомлений.

<div class="alert alert-primary" role="alert">
  A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
  A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
  A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
  A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

Дополнительное содержимое

Оповещения также могут содержать дополнительные элементы HTML, такие как заголовки, абзацы и разделители.

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Отлично сработано!</h4>
  <p>О да, Вы успешно прочитали это важное предупреждающее сообщение. Этот пример текста будет длиться немного дольше, чтобы Вы могли увидеть, как интервалы в предупреждении работают с этим типом контента.</p>
  <hr>
  <p class="mb-0">Когда Вам нужно, обязательно используйте маржинальные утилиты, чтобы все было в порядке и порядке.</p>
</div>

Отмена («крестик»)

Использование JS-плагина уведомлений дает возможность закрыть «крестиком» любое строчное уведомление.

  • Удостоверьтесь, что подгрузили плагин уведомлений, или компилированный JavaScript из Bootstrap.
  • Если вы загружаете JavaScript для уведомлений из файла, это потребует util.js. Он есть в компилированной версии.
  • Добавьте «крестик» отмены и класс .alert-dismissible, который создаст дополнительный паддинг справа от сообщения и спозиционирует кнопку класса .close.
  • В «крестике» отмены добавьте атрибут data-dismiss="alert", запускающий функциональность JS. Используйте элемент
  • Для анимации уведомлений при их закрытии добавьте классы .fade и .show.

Вот демо:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Внимание!</strong> Вам следует проверить некоторые из этих полей.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

«Поведение» JavaScript

Триггеры

Включите отклонение предупреждения через JavaScript:

$('.alert').alert()

Или с атрибутами data на кнопке с уведомлением, как показано выше:

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

Обратите внимание, что закрытие предупреждения приведет к его удалению из DOM.

Методы

Метод Описание
$().alert() Заставляет уведомление «слушать» события по клику на дочерние элементы с атрибутом data-dismiss="alert". (Необязательно использовать здесь авто-инициализацию API)
$().alert('close') Закрывает уведомление методом удаления его из DOM-структуры. Если в элемент добавлены классы .fade и .show – уведомление исчезнет до того, как удалено.
$().alert('dispose') Уничтожает уведомление элемента. 
$('.alert').alert('close')

События

Плагин уведомлений Bootstrap использует несколько событий для связи с функциональностью уведомлений.

Событие Описание
close.bs.alert Это событие запускается немедленно при вызове экземпляра метода close.
closed.bs.alert Это событие запускается, когда уведомление закрыто (событие будет ждать завершения «переходов» СSS). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something...
})
Помочь проекту