Рекомендуемый курс:

Bootstrap 5 уведомление

Уведомление

Bootstrap 5 предоставляет простой способ создания предопределенных уведомлений:

  • Уведомления создаются с помощью класса .alert, за которым следует один из контекстных классов:
  • .alert-success
  • .alert-info
  • .alert-warning
  • .alert-danger
  • .alert-primary
  • .alert-secondary
  • .alert-light

Пример

<div class="alert alert-success">
  <strong>Успешно!</strong> Этот警报ный блок показывает успешное или положительное действие.
</div>

Попробуйте сами

.alert-dark

Уведомляющая ссылка .alert-link Класс добавляется к любым ссылкам в блоке уведомления, чтобы создать "соответствующую цветную ссылку":

Пример

<div class="alert alert-success">
  <strong>Успешно!</strong> Вы должны <a href="#" class="alert-link">прочитать это сообщение</a>.
</div>

Попробуйте сами

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

Чтобы закрыть уведомление, добавьте .alert-dismissible Класс добавляется к контейнеру уведомления. Затем class="btn-close" и data-bs-dismiss="alert" Добавьте к элементам ссылок или кнопок (警报框 исчезнет при нажатии на него).

Пример

<div class="alert alert-success alert-dismissible">
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  <strong>Успешно!</strong> Этот警报ный блок показывает успешное или положительное действие.
</div>

Попробуйте сами

Анимация уведомления

.fade и .show Класс добавляется при закрытии уведомления с эффектом fadeIn и fadeOut:

Пример

<div class="alert alert-danger alert-dismissible fade show">

Попробуйте сами