Уведомления
Предоставляйте контекстные сообщения обратной связи для типичных действий пользователя с помощью нескольких доступных и гибких предупреждающих сообщений.
Примеры
Уведомления доступны для любой длины как текста, так и опциональной кнопки отмены. Для правильной стилизации используйте один из 8 требуемых контекстуальных классов (например, .alert-success). Для строчного отклонения используйте плагин уведомлений jQuery.
<divclass="alert alert-primary"role="alert"> Это основное уведомление — check it out!
</div><divclass="alert alert-secondary"role="alert"> Это дополнительное уведомление — check it out!
</div><divclass="alert alert-success"role="alert"> Это уведомление об успехе — check it out!
</div><divclass="alert alert-danger"role="alert"> Это уведомление об опасности — check it out!
</div><divclass="alert alert-warning"role="alert"> Это уведомление-предупреждение — check it out!
</div><divclass="alert alert-info"role="alert"> Это инфо-уведомление — check it out!
</div><divclass="alert alert-light"role="alert"> Это светлое уведомление — check it out!
</div><divclass="alert alert-dark"role="alert"> Это темное уведомление — check it out!
</div>Использование вспомогательных технологий
Использование цвета как дополнительного инструмента информативности доступно только в визуальной сфере, что ограничивает пользователей вспомогательных технологий, например, программ для чтения текста с экрана. Удостоверьтесь, что информация, обозначенная цветом, также доступна из самого контента (т.е. в тексте) или содержится в альтернативных средствах – таких как дополнительный скрытый в классе .sr-only текст.
Цвет ссылки
Используйте класс .alert-link для соответствия цвета ссылок цветам уведомлений.
<divclass="alert alert-primary"role="alert"> Это основное уведомление с <ahref="#"class="alert-link">примером ссылки</a>.
</div><divclass="alert alert-secondary"role="alert"> Это дополнительное уведомление с <ahref="#"class="alert-link">примером ссылки</a>.
</div><divclass="alert alert-success"role="alert"> Это уведомление об успехе с <ahref="#"class="alert-link">примером ссылки</a>.
</div><divclass="alert alert-danger"role="alert"> Это уведомление об опасности с <ahref="#"class="alert-link">примером ссылки</a>.
</div><divclass="alert alert-warning"role="alert"> Это уведомление-предупреждение с <ahref="#"class="alert-link">примером ссылки</a>.
</div><divclass="alert alert-info"role="alert"> Это инфо-уведомление с <ahref="#"class="alert-link">примером ссылки</a>.
</div><divclass="alert alert-light"role="alert"> Это светлое уведомление с <ahref="#"class="alert-link">примером ссылки</a>.
</div><divclass="alert alert-dark"role="alert"> Это темное уведомление с <ahref="#"class="alert-link">примером ссылки</a>.
</div>Дополнительное содержимое
Уведомления также могут содержать элементы HTML – заголовки, параграфы и т.п.
Отличная работа!
Вы успешно прочитали это важное сообщение. Это пример текста немного длиннее, так что вы увидите, как работают отступы в сообщениях уведомлений.
Когда необходимо, используйте марджины для создания необходимых отступов.
<divclass="alert alert-success"role="alert"><h4class="alert-heading">Отличная работа!</h4><p>Вы успешно прочитали это важное сообщение. Это пример текста немного длиннее, так что вы увидите, как работают отступы в сообщениях уведомлений.</p><hr><pclass="mb-0">Когда необходимо, используйте марджины для создания необходимых отступов.</p></div>Отмена («крестик»)
Использование JS-плагина уведомлений дает возможность закрыть «крестиком» любое строчное уведомление.
- Удостоверьтесь, что подгрузили плагин уведомлений, или компилированный JavaScript из Bootstrap.
- Если вы загружаете JavaScript для уведомлений из файла, это потребует
util.js. Он есть в компилированной версии. - Добавьте «крестик» отмены и класс
.alert-dismissible, который создаст дополнительный паддинг справа от сообщения и спозиционирует кнопку класса.close. - В «крестике» отмены добавьте атрибут
data-dismiss="alert", запускающий функциональность JS. Используйте элемент<button>для правильной работы на всех устройствах. - Для анимации уведомлений при их закрытии добавьте классы
.fadeи.show.
Вот демо:
<divclass="alert alert-warning alert-dismissible fade show"role="alert"><strong>Holy guacamole!</strong> You should check in on some of those fields below. <buttontype="button"class="close"data-dismiss="alert"aria-label="Close"><spanaria-hidden="true">×</span></button></div>«Поведение» JavaScript
Триггеры
Включите закрытие уведомления через JavaScript:
$(".alert").alert()Или сделайте это с помощью атрибутов data на кнопке внутри уведомления, как показано ниже:
<buttontype="button"class="close"data-dismiss="alert"aria-label="Close"><spanaria-hidden="true">×</span></button>Заметим, что закрытие уведомления удалит его из DOM-структуры документа.
Методы
| Метод | Описание |
|---|---|
$().alert() | Заставляет уведомление «слушать» события по клику на дочерние элементы с атрибутом data-dismiss="alert". (Необязательно использовать здесь авто-инициализацию API) |
$().alert('close') | Закрывает уведомление методом удаления его из DOM-структуры. Если в элемент добавлены классы .fade и .show – уведомление исчезнет до того, как удалено. |
$().alert('dispose') | Уничтожает уведомление элемента. |
$(".alert").alert('close')События
Плагин уведомлений Bootstrap использует несколько событий для связи с функциональностью уведомлений.
| Событие | Описание |
|---|---|
close.bs.alert | Это событие запускается немедленно при вызове экземпляра метода close. |
closed.bs.alert | Это событие запускается, когда уведомление закрыто (событие будет ждать завершения «переходов» СSS). |
$('#myAlert').on('closed.bs.alert',function(){// do something…})