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

Как создать сообщение с иконкой

Пример, в котором сообщение построено с помощью CSS Flexbox и содержит в левой части иконку. В этом примере в качестве иконок используются значки из бесплатной коллекции Font Awesome 5.

Bootstrap 4 – Сообщение с иконкой 
<!-- 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 – Сообщение с иконкой 
<!-- 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 – Сообщение со стрелочкой 
<!-- 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>