Посмотреть на GitHub Оригинал

Оповещения

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

Примеры

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

<div class="alert alert-primary" role="alert">
  Простое primary оповещение - проверьте!
</div>
<div class="alert alert-secondary" role="alert">
  Простое secondary оповещение - проверьте!
</div>
<div class="alert alert-success" role="alert">
  Простое success оповещение - проверьте!
</div>
<div class="alert alert-danger" role="alert">
  Простое danger оповещение - проверьте!
</div>
<div class="alert alert-warning" role="alert">
  Простое warning оповещение - проверьте!
</div>
<div class="alert alert-info" role="alert">
  Простое info оповещение - проверьте!
</div>
<div class="alert alert-light" role="alert">
  Простое light оповещение - проверьте!
</div>
<div class="alert alert-dark" role="alert">
  Простое dark оповещение - проверьте!
</div>
Передача смысла вспомогательным технологиям

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

Цвет ссылки

Используйте служебный класс .alert-link, чтобы быстро предоставлять соответствующие цветные ссылки в любом уведомлении.

<div class="alert alert-primary" role="alert">
  Простое primary оповещение с <a href="#" class="alert-link">примером ссылки</a>. Если хотите, щелкните по нему.
</div>
<div class="alert alert-secondary" role="alert">
  Простое secondary оповещение с <a href="#" class="alert-link">примером ссылки</a>. Если хотите, щелкните по нему.
</div>
<div class="alert alert-success" role="alert">
  Простое success оповещение с <a href="#" class="alert-link">примером ссылки</a>. Если хотите, щелкните по нему.
</div>
<div class="alert alert-danger" role="alert">
  Простое danger оповещение с <a href="#" class="alert-link">примером ссылки</a>. Если хотите, щелкните по нему.
</div>
<div class="alert alert-warning" role="alert">
  Простое warning оповещение с <a href="#" class="alert-link">примером ссылки</a>. Если хотите, щелкните по нему.
</div>
<div class="alert alert-info" role="alert">
  Простое info оповещение с <a href="#" class="alert-link">примером ссылки</a>. Если хотите, щелкните по нему.
</div>
<div class="alert alert-light" role="alert">
  Простое light оповещение с <a href="#" class="alert-link">примером ссылки</a>. Если хотите, щелкните по нему.
</div>
<div class="alert alert-dark" role="alert">
  Простое dark оповещение с <a href="#" class="alert-link">примером ссылки</a>. Если хотите, щелкните по нему.
</div>

Дополнительный контент

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

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

Отклонение

Используя плагин предупреждений JavaScript, можно отклонить любые встроенные предупреждения. Вот как:

  • Убедитесь, что Вы загрузили плагин предупреждений или скомпилированный Bootstrap JavaScript.
  • Если Вы создаете наш JavaScript из исходного кода, он требует util.js. Скомпилированная версия включает это.
  • Добавьте кнопку отклонения и класс .alert-dismissible, который добавляет дополнительный отступ справа от предупреждения и позиционирует кнопку .close.
  • На кнопке отклонения добавьте атрибут data-dismiss="alert", который запускает функциональность JavaScript. Обязательно используйте с ним элемент <button> для правильного поведения на всех устройствах.
  • Чтобы анимировать предупреждения при их отклонении, не забудьте добавить классы .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". (Не требуется при использовании автоматической инициализации.)
$().alert('close') Закрывает предупреждение, удаляя его из модели DOM. Если в элементе присутствуют классы .fade и .show, предупреждение исчезнет, прежде чем оно будет удалено.
$().alert('dispose') Уничтожает уведомление элемента. 
$('.alert').alert('close')

События

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

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