Уведомления
Предоставляйте контекстные сообщения обратной связи для типичных действий пользователя с помощью нескольких доступных и гибких предупреждающих сообщений.
Примеры
Уведомления доступны для текста любой длины, а также с кнопкой закрытия. Для правильного оформления используйте один из восьми обязательных контекстных классов (например, .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>
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()
})