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">×</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">×</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">×</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>