Bootstrap 5 Оповещения
Bootstrap 5 позволяет легко создавать блоки оповещений.
Оповещения могут использовать.alertкласс, после чего следуют.alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-lightили.alert-darkкласс, чтобы получить:
Пример
<div class="alert alert-success">
<strong>Успех!</strong>Указывает на успешное или положительное действие.</div>
Попробуйте сами »
Оповещения со ссылками
В оповещениях добавьтеalert-linkкласс, чтобы задать ссылку, совпадающую с цветом оповещения:
Пример
<div class="alert alert-success">
<strong>Успех!</strong>Вам следует внимательно прочитать<a href="#" class="alert-link">это сообщение</a>。
</div>
Попробуйте сами »
Закрытие оповещений
Мы можем добавить.alert-dismissibleкласс к div в оповещении, а затем добавить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Класс используется для установки эффектов исчезновения и появления при закрытии оповещения:
Другие расширения