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

Александр Мальцев
Александр Мальцев
50K
10
Bootstrap - Alerts (сообщения)
Содержание:
  1. Создание сообщений в Bootstrap 3 и 4
  2. Закрытие (удаление) сообщений
  3. События при закрытии сообщений
  4. Как создать сообщение с иконкой
  5. Комментарии

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

Комментарии:

  1. Анатолий
    Анатолий
    07.12.2020, 17:40
    Делаю автоматическое закрытие алертов скриптом из вашего примера
    $(function(){
    window.setTimeout(function(){
    $('#my-alert').alert('close');
    },5000);
    });

    Однако алерт закрывается только 1 раз, если вызвать алерт второй раз, то он не закроется (нужно обновлять страницу). Но у меня на странице можно многократно вызывать это сообщение и нужно чтобы оно всегда само закрывалось. Как мне быть, подскажите пожалуйста
    1. Александр Мальцев
      Александр Мальцев
      08.12.2020, 16:30
      Необходимо поместить эту функцию в то место, в котором вы вызываете alert окно:
      window.setTimeout(function(){
      $('#my-alert').alert('close');
      },5000);
      
      Тогда оно после показа через 5 секунд автоматически закроется.
    2. D2207
      D2207
      14.08.2020, 20:48
      Не могу понять как надо использовать эти уведомления. Написал я код он есть на странице, закрывается по крестику, имеет ссылки, иконки. Но как его привязать к событию? Например клик на кнопку. Добавить в функцию onClick уведомление?
      1. Александр Мальцев
        Александр Мальцев
        17.08.2020, 04:31
        В этом случае alert удобней конструировать с помощью JavaScript, а затем добавлять их в нужное место на странице. Пример, в котором alert используются для уведомлений, показывающихся в верхнем правом углу страницы.
      2. Андрей
        Андрей
        26.09.2018, 10:35
        Как на bootstrap 3 сделать кнопку больше не показывать?
        1. Александр Мальцев
          Александр Мальцев
          26.09.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
        2. Сергей
          Сергей
          11.08.2015, 19:57
          Валидаторы выдают предупреждения на CSS и JS файлы Bootstrap при их подключении. Хотя браузеры отображают страницы вроде корректно. Это я что-то «начудил» у себя, или у всех так?
          1. Александр Мальцев
            Александр Мальцев
            12.08.2015, 15:16
            А что за валидатор? Они обычно описывают ошибки.
          2. Сергей
            Сергей
            11.08.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>
            1. Александр Мальцев
              Александр Мальцев
              12.08.2015, 15:00
              Сергей, более корректно метод alert('close') вызывать не для самой кнопки, а для элемента с классом alert.
              <script>
              $('.close').click(function(){
                  $(this).parent('.close').alert('close');
              });
              </script>
              
            Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.