Bootstrap - Alerts (сообщения)

Статья, в которой рассмотрим компонент фреймворка 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>
Как создать сообщение с иконкой
Пример, в котором сообщение построено с помощью CSS Flexbox и содержит в левой части иконку. В этом примере в качестве иконок используются значки из бесплатной коллекции Font Awesome 5.

<!-- Bootstrap 4 --> /* CSS */ .alert-message .alert-icon { width: 3rem; } .alert-message .close{ font-size: 1rem; color: #a6a6a6; } .alert-primary .alert-icon { background-color: #b8daff; } ... <!-- HTML --> <div class="alert alert-primary alert-message d-flex rounded p-0" role="alert"> <div class="alert-icon d-flex justify-content-center align-items-center flex-grow-0 flex-shrink-0 py-3"> <i class="fas fa-bullhorn"></i> </div> <div class="d-flex align-items-center py-2 px-3"> Информационное сообщение, имеющее тему primary </div> <a href="#" class="close d-flex ml-auto justify-content-center align-items-center px-3" data-dismiss="alert"> <i class="fas fa-times"></i> </a> </div>
Вариант сообщений (alerts) с иконками, которые по сравнению с текстом имеют более большой размер.

<!-- Bootstrap 4 --> /* CSS */ .alert-message .alert-icon { width: 4rem; font-size: 1.5rem; } .alert-message .close{ font-size: 1rem; color: #a6a6a6; } ... <!-- HTML --> <div class="alert alert-primary alert-message d-flex rounded p-0" role="alert"> <div class="alert-icon d-flex justify-content-center align-items-center flex-grow-0 flex-shrink-0 py-3"> <i class="fas fa-bullhorn"></i> </div> <div class="d-flex align-items-center py-2 pr-1"> Информационное сообщение, имеющее тему primary </div> <a href="#" class="close d-flex ml-auto justify-content-center align-items-center px-3" data-dismiss="alert"> <i class="fas fa-times"></i> </a> </div>
Ещё один пример сообщений, которые построены с использованием иконки и стрелочки.

<!-- Bootstrap 4 --> /* CSS */ .alert-arrow { border: 1px solid #60c060; color: #54a754; } .alert-arrow .alert-icon { position: relative; width: 3rem; background-color: #60c060; } .alert-arrow .alert-icon::after { content: ""; position: absolute; width: 0; height: 0; border-top: .75rem solid transparent; border-bottom: .75rem solid transparent; border-left: .75rem solid #60c060; right: -.75rem; top: 50%; transform: translateY(-50%); } .alert-arrow .close { font-size: 1rem; color: #cacaca; } ... <!-- HTML --> <div class="alert alert-arrow d-flex rounded p-0" role="alert"> <div class="alert-icon d-flex justify-content-center align-items-center text-white flex-grow-0 flex-shrink-0"> <i class="fa fa-check"></i> </div> <div class="alert-message d-flex align-items-center py-2 pl-4 pr-3"> Информационное сообщение, содержащее некоторый текст. Это сообщение можно закрыть. </div> <a href="#" class="close d-flex ml-auto justify-content-center align-items-center px-3" data-dismiss="alert"> <i class="fas fa-times"></i> </a> </div>
$(function(){
window.setTimeout(function(){
$('#my-alert').alert('close');
},5000);
});
Однако алерт закрывается только 1 раз, если вызвать алерт второй раз, то он не закроется (нужно обновлять страницу). Но у меня на странице можно многократно вызывать это сообщение и нужно чтобы оно всегда само закрывалось. Как мне быть, подскажите пожалуйста
Тогда оно после показа через 5 секунд автоматически закроется.
Скрипт, который будет сохранять состояние alert в Local Strorage:
Демо примера: itchief.ru/examples/lab.php?topic=bootstrap&file=b3-alerts-example-1