Перейти к основному содержанию

Alerts (оповещения)

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

Содержание

Примеры

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

<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert—check it out!
</div>
Передача смысла вспомогательным технологиям

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

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

<div class="alert alert-primary" role="alert">
  A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
  A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
  A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
  A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

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

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

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <hr>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

Dismissing (отклонение)

Используя плагин предупреждений JavaScript, можно отклонить любые встроенные предупреждения. Вот как:

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

<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="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

Поведение JavaScript

Триггеры

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

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

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

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

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

Методы

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

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

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

Метод Описание
close Закрывает предупреждение, удаляя его из модели DOM. Если .fadeи .showклассы присутствуют на элементе, предупреждение исчезнет, прежде чем он будет удален.
dispose Уничтожает предупреждение элемента.
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 () { 
  // do something…
})