Оповещения
Предоставляйте контекстные сообщения обратной связи для типичных действий пользователя с помощью нескольких доступных и гибких предупреждающих сообщений.
Оповещения доступны для любой длины текста, а также для дополнительной кнопки закрытия. Для правильной стилизации используйте один из восьми обязательных контекстных классов (например, .alert-success
). Для встроенного отключения используйте jQuery-плагин alerts .
<div class="alert alert-primary" role="alert">
This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
This is a danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
This is a warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
This is a info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
This is a light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
This is a dark alert—check it out!
</div>
Передача смысла вспомогательным технологиям
Использование цвета для добавления значения обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана. Убедитесь, что информация, обозначенная цветом, либо очевидна из самого содержимого (например, видимый текст), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый вместе с .sr-only
классом.
Используйте .alert-link
служебный класс, чтобы быстро предоставить соответствующие цветные ссылки в любом предупреждении.
<div class="alert alert-primary" role="alert">
This is a 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">
This is a 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">
This is a 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">
This is a 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">
This is a 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">
This is a 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">
This is a 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">
This is a 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">×</span>
</button>
</div>
Включите отклонение оповещения через JavaScript:
Или с data
атрибутами кнопки внутри alert , как показано выше:
Обратите внимание, что закрытие оповещения удалит его из DOM.
Метод | Описа��ие |
---|---|
$().alert() |
Делает оповещение прослушиванием событий щелчка на элементах-потомках, которые имеют data-dismiss="alert" атрибут. (Не требуется при использовании автоинициализации data-api.) |
$().alert('close') |
Закрывает оповещение, удаляя его из DOM. Если классы .fade и .show присутствуют в элементе, оповещение исчезнет, прежде чем оно будет удалено. |
$().alert('dispose') |
Уничтожает предупреждение элемента. |
Плагин предупреждений Bootstrap предоставляет несколько событий для подключения к функциям предупреждений.
Мероприятие | Описание |
---|---|
close.bs.alert |
Это событие срабатывает сразу же при close вызове метода экземпляра. |
closed.bs.alert |
Это событие запускается, когда оповещение закрыто (будет ожидать завершения переходов CSS). |