Уведомления

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 вместе с кнопкой «Закрыть». Когда пользователь щёлкает по такой кнопке, уведомление исчезает.

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

Код примера скопирован в буфер

<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>

Автор: Йен Диксон

Последнее изменение: 21.02.2024