Уведомления
Предоставляйте контекстные сообщения обратной связи для типичных действий пользователя с помощью доступных и гибких предупреждающих сообщений.
Примеры
Уведомления доступны для любой длины как текста, так и опциональной кнопки отмены. Для правильной стилизации используйте один из 8 требуемых контекстуальных классов (например, .alert-success). Для строчного отклонения используйте плагин уведомлений jQuery.
<divclass="alert alert-primary"role="alert"> Простое primary оповещение - проверьте!
</div><divclass="alert alert-secondary"role="alert"> Простое secondary оповещение - проверьте!
</div><divclass="alert alert-success"role="alert"> Простое success оповещение - проверьте!
</div><divclass="alert alert-danger"role="alert"> Простое danger оповещение - проверьте!
</div><divclass="alert alert-warning"role="alert"> Простое warning оповещение - проверьте!
</div><divclass="alert alert-info"role="alert"> Простое info оповещение - проверьте!
</div><divclass="alert alert-light"role="alert"> Простое light оповещение - проверьте!
</div><divclass="alert alert-dark"role="alert"> Простое dark оповещение - проверьте!
</div>Использование вспомогательных технологий
Использование цвета как дополнительного инструмента информативности доступно только в визуальной сфере, что ограничивает пользователей вспомогательных технологий, например, программ для чтения текста с экрана. Удостоверьтесь, что информация, обозначенная цветом, также доступна из самого контента (т.е. в тексте) или содержится в альтернативных средствах – таких как дополнительный скрытый в классе .sr-only текст.
Цвет ссылки
Используйте класс .alert-link для соответствия цвета ссылок цветам уведомлений.
<divclass="alert alert-primary"role="alert"> Простое primary оповещение с <ahref="#"class="alert-link">примером ссылки</a>. Если хотите, щелкните по нему.
</div><divclass="alert alert-secondary"role="alert"> Простое secondary оповещение с <ahref="#"class="alert-link">примером ссылки</a>. Если хотите, щелкните по нему.
</div><divclass="alert alert-success"role="alert"> Простое success оповещение с <ahref="#"class="alert-link">примером ссылки</a>. Если хотите, щелкните по нему.
</div><divclass="alert alert-danger"role="alert"> Простое danger оповещение с <ahref="#"class="alert-link">примером ссылки</a>. Если хотите, щелкните по нему.
</div><divclass="alert alert-warning"role="alert"> Простое warning оповещение с <ahref="#"class="alert-link">примером ссылки</a>. Если хотите, щелкните по нему.
</div><divclass="alert alert-info"role="alert"> Простое info оповещение с <ahref="#"class="alert-link">примером ссылки</a>. Если хотите, щелкните по нему.
</div><divclass="alert alert-light"role="alert"> Простое light оповещение с <ahref="#"class="alert-link">примером ссылки</a>. Если хотите, щелкните по нему.
</div><divclass="alert alert-dark"role="alert"> Простое dark оповещение с <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>Внимание!</strong> Вам следует проверить некоторые из этих полей. <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...
})