Уведомления

Выводят контекстные сообщения для типовых действий пользователя.

Примеры

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

<div class="alert alert-success" role="alert">
  <strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-info" role="alert">
  <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<div class="alert alert-danger" role="alert">
  <strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>

Передача значения ассистивным технологиям

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

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

<div class="alert alert-success" role="alert">
  <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
</div>
<div class="alert alert-info" role="alert">
  <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
  <strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.
</div>
<div class="alert alert-danger" role="alert">
  <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
</div>

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

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

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

Закрытие

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

  • Убедитесь, что вы загрузили плагин уведомления или скомпилированный Bootstrap JavaScript.
  • Добавьте кнопку закрытия и класс .alert-dismissible, который добавляет дополнительный отступ справа и positions the .close button.
  • На кнопку закрытия добавьте атрибут data-dismiss="alert", который запускает функционал JavaScript. Обязательно используйте элемент <button> для правильного поведения на всех устройствах.
  • Чтобы анимировать уведомления при их закрытии, добавьте классы .fade и .show.

Вы можете увидеть это в действии на демо:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
</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").alert('close')

События

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

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