Уведомления

Выводят контекстные сообщения для типовых действий пользователя.

Содержание

Содержание
Примеры
JavaScript поведение

Примеры

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

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it's not super important.

Warning! Better check yourself, you're not looking too good.

Oh snap! Change a few things up and try submitting again.

<div class="alert alert-success" role="alert">
  <strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-info" role="alert">
  <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<div class="alert alert-danger" role="alert">
  <strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>

Передача значения ассистивным технологиям

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

Цвет ссылок

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

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it's not super important.

Warning! Better check yourself, you're not looking too good.

Oh snap! Change a few things up and try submitting again.

<div class="alert alert-success" role="alert">
  <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
</div>
<div class="alert alert-info" role="alert">
  <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
  <strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.
</div>
<div class="alert alert-danger" role="alert">
  <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
</div>

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

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

Well done!

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.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

<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>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

Закрытие

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

Убедитесь, что вы загрузили плагин уведомления или скомпилированный Bootstrap JavaScript.
Добавьте кнопку закрытия и класс .alert-dismissible, который добавляет дополнительный отступ справа и positions the .close button.
На кнопку закрытия добавьте атрибут data-dismiss="alert", который запускает функционал JavaScript. Обязательно используйте элемент <button> для правильного поведения на всех устройствах.
Чтобы анимировать уведомления при их закрытии, добавьте классы .fade и .show.

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

Holy guacamole! You should check in on some of those fields below.

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
</div>

JavaScript поведение

Триггеры

Включите закрытие уведомлений с помощью JavaScript:

$(".alert").alert()

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

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

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

Методы

Метод	Описание
`$().alert()`	Делает уведомление, реагирующим на событие щелчка в элементах потомков, у которых есть атрибут `data-dismiss="alert"`. (Необязательно при использовании авто-инициализации данных API.)
`$().alert('close')`	Закрывает уведомление, удалив его из DOM. Если классы `.fade` и `.show` присутствуют на элементе, уведомление исчезнет перед его удалением.

$(".alert").alert('close')

События

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

Событие	Описание
`close.bs.alert`	Это событие запускается сразу же, когда вызывается метод экземпляра `close`.
`closed.bs.alert`	Это событие запускается, когда уведомление было закрыто (будет ждать CSS-переходы для завершения).

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Компоненты