Уведомления
Предоставляйте контекстные сообщения обратной связи для типичных действий пользователя с помощью доступных и гибких предупреждающих сообщений.
Примеры
Уведомления доступны для любой длины как текста, так и опциональной кнопки отмены. Для правильной стилизации используйте один из восьми требуемых контекстуальных классов (например, .alert-success
). Для строчного отклонения используйте плагин уведомлений JavaScript.
<div class="alert alert-primary" role="alert">
Это основное уведомление — check it out!
</div>
<div class="alert alert-secondary" role="alert">
Это дополнительное уведомление — check it out!
</div>
<div class="alert alert-success" role="alert">
Это уведомление об успехе — check it out!
</div>
<div class="alert alert-danger" role="alert">
Это уведомление об опасности — check it out!
</div>
<div class="alert alert-warning" role="alert">
Это уведомление-предупреждение — check it out!
</div>
<div class="alert alert-info" role="alert">
Это инфо-уведомление — check it out!
</div>
<div class="alert alert-light" role="alert">
Это светлое уведомление — check it out!
</div>
<div class="alert alert-dark" role="alert">
Это темное уведомление — check it out!
</div>
Использование вспомогательных технологий
Использование цвета как дополнительного инструмента информативности доступно только в визуальной сфере, что ограничивает пользователей вспомогательных технологий, например, программ для чтения текста с экрана. Удостоверьтесь, что информация обозначенная цветом, также доступна и из самого контента (например, видимый текст) или содержится в альтернативных средствах – таких как дополнительный скрытый в классе .visually-hidden
текст.
Цвет ссылки
Используйте класс .alert-link
для соответствия цвета ссылок цветам уведомлений.
<div class="alert alert-primary" role="alert">
Это основное уведомление с <a href="#" class="alert-link">примером ссылки</a>.
</div>
<div class="alert alert-secondary" role="alert">
Это дополнительное уведомление с <a href="#" class="alert-link">примером ссылки</a>.
</div>
<div class="alert alert-success" role="alert">
Это уведомление об успехе с <a href="#" class="alert-link">примером ссылки</a>.
</div>
<div class="alert alert-danger" role="alert">
Это уведомление об опасности с <a href="#" class="alert-link">примером ссылки</a>.
</div>
<div class="alert alert-warning" role="alert">
Это уведомление-предупреждение с <a href="#" class="alert-link">примером ссылки</a>.
</div>
<div class="alert alert-info" role="alert">
Это инфо-уведомление с <a href="#" class="alert-link">примером ссылки</a>.
</div>
<div class="alert alert-light" role="alert">
Это светлое уведомление с <a href="#" class="alert-link">примером ссылки</a>.
</div>
<div class="alert alert-dark" role="alert">
Это темное уведомление с <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-плагина уведомлений дает возможность закрыть «крестиком» любое строчное уведомление.
- Удостоверьтесь, что подгрузили плагин уведомлений, или компилированный JavaScript из Bootstrap.
- Добавьте кнопку закрытия и класс
.alert-dismissible
, который добавляет дополнительный отступ справа от предупреждения и спозиционирует кнопку закрытия. - В «крестике» отмены добавьте атрибут
data-bs-dismiss="alert"
, запускающий функциональность JavaScript. Используйте элемент<button>
для правильной работы на всех устройствах. - Для анимации уведомлений при их закрытии добавьте классы
.fade
и.show
.
Вы можете увидеть это в действии на живой демонстрации:
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
closed.bs.alert
и программно устанавливает event focus()
в наиболее подходящее место на странице. Если вы планируете переместить фокус на неинтерактивный элемент, который обычно не в фокусу, то обязательно добавьте к элементу tabindex="-1"
.
Sass
Переменные
$alert-padding-y: $spacer;
$alert-padding-x: $spacer;
$alert-margin-bottom: 1rem;
$alert-border-radius: $border-radius;
$alert-link-font-weight: $font-weight-bold;
$alert-border-width: $border-width;
$alert-bg-scale: -80%;
$alert-border-scale: -70%;
$alert-color-scale: 40%;
$alert-dismissible-padding-r: $alert-padding-x * 3; // 3x covers width of x plus default padding on either side
Вариант миксина
Используется в сочетании с $theme-colors
для создания классов контекстных модификаторов для наших предупреждений.
@mixin alert-variant($background, $border, $color) {
color: $color;
@include gradient-bg($background);
border-color: $border;
.alert-link {
color: shade-color($color, 20%);
}
}
Цикл
Цикл, который генерирует классы модификаторов с помощью миксина alert-variant()
.
// Generate contextual modifier classes for colorizing the alert.
@each $state, $value in $theme-colors {
$alert-background: shift-color($value, $alert-bg-scale);
$alert-border: shift-color($value, $alert-border-scale);
$alert-color: shift-color($value, $alert-color-scale);
@if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
$alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
}
.alert-#{$state} {
@include alert-variant($alert-background, $alert-border, $alert-color);
}
}
«Поведение» 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="Close"></button>
Заметим, что закрытие уведомления удалит его из DOM-структуры документа.
Методы
Вы можете создать экземпляр оповещения с помощью конструктора оповещений, например:
var myAlert = document.getElementById('myAlert')
var bsAlert = new bootstrap.Alert(myAlert)
Это заставляет предупреждения alert
отсеживать нажатие на дочерних элементах, которые имеют атрибут data-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()
})