Уведомления

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

Примеры

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

<div class="alert alert-success" role="alert">
  <strong>Отлично!</strong> Вы успешно увидели это важное сообщение.
</div>
<div class="alert alert-info" role="alert">
  <strong>Берегись!</strong> Это предупреждение требует вашего внимания, но это не очень важно.
</div>
<div class="alert alert-warning" role="alert">
  <strong>Опасность!</strong>Лучше взгляните на себя, вы выглядите не очень хорошо.
</div>
<div class="alert alert-danger" role="alert">
  <strong>Щелк!</strong> Измените данные и отправьте заново.
</div>

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

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

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

<div class="alert alert-success" role="alert">
  <strong>Отлично!</strong> Вы успешно увидели <a href="#" class="alert-link">это важное сообщение</a>.
</div>
<div class="alert alert-info" role="alert">
  <strong>Берегись!</strong> Это <a href="#" class="alert-link">предупреждение требует вашего внимания</a>, но это не очень важно.
</div>
<div class="alert alert-warning" role="alert">
  <strong>Опасность!</strong> Лучше взгляните на себя, вы <a href="#" class="alert-link">выглядите не очень хорошо</a>.
</div>
<div class="alert alert-danger" role="alert">
  <strong>Щелк!</strong> <a href="#" class="alert-link">Измените данные </a> и отправьте заново.
</div>

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

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

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Отлично!</h4>
  <p>Все, да, вы успешно прочитали это важное сообщение. Это пример текста, который будет работать немного дольше, чтобы вы могли видеть, как интервал между оповещением работает с таким типом контента.</p>
  <p class="mb-0">Всякий раз, когда вам необходимо быть уверенными, обязательно используйте утилиты margin, чтобы было красиво и аккуратно.</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>Святая корова!</strong> Вы должны зарегистрироваться в некоторых из этих полей ниже.
</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 () {
  // напишите
})