Source

Оповещения

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

Примеры

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

<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>

Увольнение

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

  • Убедитесь, что вы загрузили плагин предупреждений или скомпилированный Bootstrap JavaScript.
  • Если вы создаете наш JavaScript из исходного кода, для этого требуетсяutil.js . Скомпилированная версия включает это.
  • Добавьте кнопку отклонения и .alert-dismissibleкласс, который добавляет дополнительные отступы справа от предупреждения и позиционирует .closeкнопку.
  • На кнопку отклонения добавьте data-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="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

Поведение JavaScript

Триггеры

Включите отклонение оповещения через JavaScript:

$('.alert').alert()

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

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

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

Методы

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

События

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

Мероприятие Описание
close.bs.alert Это событие срабатывает сразу же при closeвызове метода экземпляра.
closed.bs.alert Это событие запускается, когда оповещение закрыто (будет ожидать завершения переходов CSS). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something...
})