Статья, в которой рассмотрим компонент фреймворка 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 – Alerts (сообщения)

Создание сообщений в 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>
Bootstrap – Сообщение (alerts), содержащее дополнительные элементы

Закрытие (удаление) сообщений

Для добавления к сообщению кнопки со значком «крестика» необходимо:

  • добавить к классам alert и alert-theme ещё класс alert-dismissible;
  • в контент контейнера сообщения добавить кнопку (button) с атрибутами class="close" и data-dismiss="alert".
Закрытие сообщения в Bootstrap 3 и 4 реализуется с помощью JavaScript. Поэтому данный функционал требует наличие подключённого к странице js-скрипта этого фреймворка или его части (в Bootstrap 4 он содержится в файле 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">&times;</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">&times;</span>
    </button>
</div>
Bootstrap – Сообщение, которое можно закрыть

Закрытие сообщений с помощью 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">&times;</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">&times;</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>