Уведомления

Bootstrap предлагает простой способ создания стилизованного окна с уведомлением через соответствующий компонент.

Чтобы создать уведомление, используйте класс .alert вместе с одним из классов .alert-* для указания типа уведомления.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="alert alert-success" role="alert">Уведомление об успехе</div> <div class="alert alert-info" role="alert">Информация</div> <div class="alert alert-warning" role="alert">Предупреждение</div> <div class="alert alert-danger" role="alert">Уведомление об опасности</div> <div class="alert alert-light" role="alert">Светлая тема</div> <div class="alert alert-dark" role="alert">Тёмная тема</div>

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

Вы можете создать закрывающиеся уведомления, добавив класс .alert-dismissible вместе с кнопкой «Закрыть». Когда пользователь щёлкает по такой кнопке, уведомление исчезает.

Здесь мы используем &times; для создания иконки «Закрыть».

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="alert alert-success alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Закрыть"> <span aria-hidden="true">&times;</span></button> <strong>Поздравляем!</strong> Вы успешно завязали шнурки! </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Эффект затухания

Вы можете придать уведомлению небольшой эффект затухания при закрытии, добавив классы .fade и .show.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="alert alert-success alert-dismissible fade show" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Закрыть"> <span aria-hidden="true">&times;</span></button> <strong>Поздравляем!</strong> Вы успешно завязали шнурки! </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Уведомления со ссылками

Используйте класс .alert-link для элемента <a>, чтобы сопоставить цвет ссылки с текстом.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="alert alert-success alert-dismissible fade show" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Закрыть"> <span aria-hidden="true">&times;</span></button> <strong>Поздравляем!</strong> Теперь вы готовы к <a href="#" class="alert-link">следующим шнуркам</a>. </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Автор и редакторы

Автор: Йен Диксон
Последнее изменение: 12.03.2020
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты