Статья, в которой рассмотрим компонент фреймворка Bootstrap 3 и 4 для создания на сайте различных по цветовой гамме сообщений.
Сообщения (alerts) предназначены для выделения на веб-странице некоторой информации с целью привлечения к ней внимания пользователя. Наиболее часто данный компонент используют для отображения ошибок и предупреждений при виладации форм обратной связи на сайтах, а также для сигнализации об успехе её отправки.
Но применения компонента можно найти не только для информирования пользователя о его результатах взаимодействия с сайтом, но и, например для того, чтобы просто выделить некоторый контент на сайте и тем самым привлечь его внимание к нему.
Цветовая гамма сообщений (alers) в Bootstrap:
alert-success
(сообщения об успешном выполнении какого-либо действия);alert-info
(информационные сообщения);alert-warning
(предупреждающие сообщения);alert-danger
(сообщения об ошибки).
Кроме этих сообщений в Bootstrap 4 доступны ещё следующие: alert-primary
, alert-secondary
, alert-light
и alert-dark
.

Создание сообщений в Bootstrap 3 и 4
Создание сообщения осуществляется посредством оборачивания необходимого текста, например, в элемент div
и добавления двух классов. Первый класс (базовый) должен иметь название alert
, а второй - alert-theme
. Вместо слова theme во втором классе необходимо указать тему (цветовую гамму) сообщению.
Примеры сообщений (Bootstrap 3):
<div class="alert alert-success" role="alert"> ... </div> <div class="alert alert-danger" role="alert"> ... </div> <div class="alert alert-warning" role="alert"> ... </div> <div class="alert alert-info" role="alert"> ... </div>
Примеры сообщений (Bootstrap 4):
<div class="alert alert-primary" role="alert"> ... </div> <div class="alert alert-secondary" role="alert"> ... </div> <div class="alert alert-success" role="alert"> ... </div> <div class="alert alert-danger" role="alert"> ... </div> <div class="alert alert-warning" role="alert"> ... </div> <div class="alert alert-info" role="alert"> ... </div> <div class="alert alert-light" role="alert"> ... </div> <div class="alert alert-dark" role="alert"> ... </div>
Кроме этого в сообщениях (alerts) доступен класс для стилизации ссылок alert-link
:
<div class="alert alert-primary" role="alert"> Информационное сообщение (alert), имеющее <a href="#" class="alert-link">ссылку</a> </div>
В сообщение кроме этого можно ещё помещать дополнительные элементы.
Например, сообщение с заголовком, абзацами и разделителем:
<div class="alert alert-primary" role="alert"> <h4 class="alert-heading">Заголовок сообщения</h4> <p>...</p> <hr> <p class="mb-0">...</p> </div>

Закрытие (удаление) сообщений
Для добавления к сообщению кнопки со значком «крестика» необходимо:
- добавить к классам
alert
иalert-theme
ещё классalert-dismissible
; - в контент контейнера сообщения добавить кнопку (button) с атрибутами
class="close"
иdata-dismiss="alert"
.
util.js
)
Класс alert-dismissible
предназначен для позиционирования кнопки внутри сообщения и добавления к ней дополнительного отступа справа. Атрибут data-dismiss="alert"
используется в качестве ключа, с помощью которого JavaScript добавляет к кнопке необходимый функционал.
Сообщение с кнопкой "Закрыть" (Bootstrap 3):
<div class="alert alert-success alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span></button> Информационное сообщение (alert), которое можно закрыть </div>
Сообщение с кнопкой "Закрыть" (Bootstrap 4):
<div class="alert alert-primary alert-dismissible fade show" role="alert"> Информационное сообщение (alert), которое можно закрыть <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div>

Закрытие сообщений с помощью JavaScript
Закрытие сообщений можно выполнить с помощью кода JavaScript. Осуществляется это посредством вызова метода alert
с параметром 'close'
.
Например, автоматически закроем сообщение с id="my-alert"
спустя 5 секунд после загрузки страницы:
<div id="my-alert" class="alert alert-danger alert-dismissible fade show" role="alert"> Информационное сообщение (alert), которое закроется через 5 секунд после загрузки страницы <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> ... <script> $(function(){ window.setTimeout(function(){ $('#my-alert').alert('close'); },5000); }); </script>
События при закрытии сообщений
Список событий, связанных с закрытием сообщений (alerts):
Событие | Описание |
---|---|
close.bs.alert |
Событие возникает перед закрытием сообщения |
closed.bs.alert |
Событие возникает после закрытия сообщения |
<!-- Элемент, в который будем выводить результат --> <ol class="result"></ol> <!-- Сообщение (alert) --> <div class="alert alert-primary alert-dismissible fade show" role="alert"> Информационное сообщение (alert), которое можно закрыть <button type="button" class="close" data-dismiss="alert" aria-label="Закрыть"> <span aria-hidden="true">×</span> </button> </div> <script> $(function(){ $('.alert').on('close.bs.alert', function(){ $('.result').append('<li>Сейчас будет закрыто сообщение (alert)</li>'); }); $('.alert').on('closed.bs.alert', function(){ $('.result').append('<li>Сообщение (alert) уже закрыто</li>'); }); }); </script>
ие В названии раздела