Перейти к основному содержанию Перейти к навигации по документации
View on GitHub

Уведомления

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

На этой странице

Примеры

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

<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>
Передача смысла вспомогательным технологиям

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

Цвет ссылки

Используйте служебный класс .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.
  • Добавьте кнопку закрытия и класс .alert-dismissible, который добавляет дополнительный отступ справа от уведомления и позиционирует кнопку закрытия.
  • На кнопку закрытия добавьте атрибут data-bs-dismiss="alert", который активирует функциональность JavaScript. Обязательно используйте с ним элемент <button> для правильного поведения на всех устройствах.
  • Чтобы анимировать уведомления при их отклонении, не забудьте добавить классы .fade и .show.

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

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Святой гуакамоле!</strong> Вам следует проверить некоторые из этих полей ниже.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Закрыть"></button>
</div>
Когда уведомление закрывается, элемент полностью удаляется из структуры страницы. Если пользователь клавиатуры отклоняет уведомление с помощью кнопки закрытия, его фокус внезапно теряется и, в зависимости от браузера, сбрасывается на начало страницы/документа. По этой причине мы рекомендуем включить дополнительный JavaScript, который прослушивает событие closed.bs.alert и программно устанавливает focus() в наиболее подходящее место на странице. Если Вы планируете переместить фокус на неинтерактивный элемент, который обычно не получает фокус, обязательно добавьте к элементу tabindex="-1".

Поведение JavaScript

Триггеры

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

var alertList = document.querySelectorAll('.alert')
alertList.forEach(function (alert) {
  new bootstrap.Alert(alert)
})

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

<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Закрыть"></button>

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

Методы

Вы можете создать экземпляр оповещения с помощью конструктора оповещений, например:

var myAlert = document.getElementById('myAlert')
var bsAlert = new bootstrap.Alert(myAlert)

Это заставляет предупреждение прослушивать события клика на дочерних элементах, которые имеют атрибут data-bs-dismiss="alert". (Не требуется при использовании автоматической инициализации data-api.)

Метод Описание
close Закрывает уведомление, удаляя его из модели DOM. Если в элементе присутствуют классы .fade и .show, предупреждение исчезнет, прежде чем оно будет удалено.
dispose Уничтожает уведомление элемента (Удаляет сохраненные данные в элементе DOM)
getInstance Статический метод, который позволяет Вам получить экземпляр предупреждения, связанный с элементом DOM, Вы можете использовать его следующим образом: bootstrap.Alert.getInstance(alert) 
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()

События

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

Событие Описание
close.bs.alert Срабатывает немедленно при вызове метода экземпляра close.
closed.bs.alert Срабатывает, когда уведомление закрыто и переходы CSS завершены. 
var myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', function () {
  // сделать что-нибудь, например, явно переместить фокус на наиболее подходящий элемент,
  // чтобы он не терялся/не сбрасывался на начало страницы
  // document.getElementById('...').focus()
})