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

Александр Мальцев

05.05.2018

40K

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

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 -->
/* 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>

Если статья понравилась, то поделитесь ей в социальных сетях:

Комментарии ()

D2207

14 августа 2020, 20:48

Не могу понять как надо использовать эти уведомления. Написал я код он есть на странице, закрывается по крестику, имеет ссылки, иконки. Но как его привязать к событию? Например клик на кнопку. Добавить в функцию onClick уведомление?
1. Александр Мальцев
  
  16 минут назад
  
  В этом случае alert удобней конструировать с помощью JavaScript, а затем добавлять их в нужное место на странице. Пример, в котором alert используются для уведомлений, показывающихся в верхнем правом углу страницы.

Андрей

26 сентября 2018, 10:35

Как на bootstrap 3 сделать кнопку больше не показывать?

Александр Мальцев

26 сентября 2018, 16:00

HTML код alert с кнопкой «Больше не показывать»:

<div id="messageA" class="alert alert-info hide" style="overflow:hidden;">
  <p style="margin-bottom: 24px;">Информационное сообщение (alert), которое можно закрыть!</p>
  <button type="button" class="btn btn-info pull-right" data-dismiss="alert">Больше не показывать</button>
</div>

Скрипт, который будет сохранять состояние alert в Local Strorage:

<script>
if (localStorage.getItem("alert_messageA") === null) {
  $('#messageA').removeClass('hide');
  $('#messageA').on('closed.bs.alert', function () {
    localStorage.setItem("alert_messageA", true);
  });
}
</script>

Демо примера: itchief.ru/examples/lab.php?topic=bootstrap&file=b3-alerts-example-1

Сергей

11 августа 2015, 19:57

Валидаторы выдают предупреждения на CSS и JS файлы Bootstrap при их подключении. Хотя браузеры отображают страницы вроде корректно. Это я что-то «начудил» у себя, или у всех так?
1. Александр Мальцев
  
  12 августа 2015, 15:16
  
  А что за валидатор? Они обычно описывают ошибки.

Сергей

11 августа 2015, 19:53

Корректен ли мой вариант закрытия сообщений с помощью javaScript:

<h4>Сообщения, для закрытия которых используется метод alert('close')</h4>
<div class="alert alert-success">
    <span class="close">&times;</span>
    Ваше действие выполнено успешно.
</div>
<div class="alert alert-warning">
    <span class="close">&times;</span>
    <strong>Предупреждение!</strong> Обнаружены проблемы с сетевым подключением.
</div>
<script>
$('.close').click(function(){$(this).alert('close');});
</script>
<code>

Александр Мальцев

12 августа 2015, 15:00
Сергей, более корректно метод alert('close') вызывать не для самой кнопки, а для элемента с классом alert.
```
<script>
$('.close').click(function(){
    $(this).parent('.close').alert('close');
});
</script>
```

Войдите, пожайлуста, в аккаунт, чтобы оставить комментарий.