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

Уведомления

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

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

Примеры

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