Уведомления, бейджи и прогресс

Три небольших компонента сообщают пользователю о состоянии. Alert — заметное сообщение о результате действия («Сохранено», «Ошибка оплаты»). Badge — маленькая метка или счётчик рядом с текстом. Progress — полоса, которая показывает, какая часть работы выполнена.

Уведомление

alert вместе с цветом alert-{цвет} и атрибутом role="alert", чтобы программа чтения с экрана сразу озвучила сообщение:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<div class="alert alert-success" role="alert">Задача «Подготовить отчёт» сохранена.</div>
<div class="alert alert-danger" role="alert">Не удалось списать оплату. Проверьте карту.</div>

Зелёная и красная плашки во всю ширину с тёмным текстом своего цвета.

Закрываемое уведомление

Классы alert-dismissible fade show и кнопка btn-close с атрибутом data-bs-dismiss="alert" добавляют крестик. Закрытие делает JavaScript Bootstrap:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Пробный период</strong> закончится через 3 дня.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Закрыть"></button>
</div>
 
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Нажмите крестик — плашка плавно исчезнет и удалится со страницы. Вернуть её поможет кнопка «Сбросить» над превью.

Бейджи

badge с text-bg-{цвет} — маленькая цветная метка. С rounded-pill она становится овальной:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<h5>Входящие <span class="badge text-bg-secondary">4</span></h5>
<p>
  Статус: <span class="badge text-bg-success">Оплачено</span>
  <span class="badge rounded-pill text-bg-danger">Срочно</span>
</p>
<button type="button" class="btn btn-primary">
  Уведомления <span class="badge text-bg-light">7</span>
</button>

Бейдж берёт размер шрифта родителя, поэтому в заголовке он крупнее, чем в абзаце. В админ-панели бейджами показывают статус заказа в таблице.

Полоса прогресса

Снаружи progress с атрибутами для программ чтения с экрана, внутри progress-bar с шириной в процентах:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<p class="mb-1">Проект «Сайт»: 65%</p>
<div class="progress" role="progressbar" aria-label="Проект «Сайт»" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 65%"></div>
</div>
 
<div class="progress mt-3" role="progressbar" aria-label="Загрузка" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" style="width: 40%">40%</div>
</div>

Синяя полоса заполнена на 65%, зелёная — на 40%, и по ней бегут косые полосы. Ширину в реальном проекте меняет JavaScript, обновляя и style, и aria-valuenow.

Частая ошибка

Ждать, что alert-dismissible сам добавит крестик. Класс только освобождает справа место под кнопку. Саму кнопку btn-close с data-bs-dismiss="alert" нужно написать, и без подключённого JavaScript она не сработает.

Спасибо, что читаете!