Bootstrap 4 алерти (сповіщення)

Bootstrap 4 алерти забезпечують простий спосіб створення сповіщень для вашого сайту:

See the Pen
Bootstrap 4 Alerts
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

Сповіщення створюються за допомогою класу  .alert, а потім додається один з контексних класів .alert-success.alert-info.alert-warning.alert-danger.alert-primary.alert-secondary.alert-lightабо .alert-dark:

<div class="alert alert-success">
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

Посилання в сповіщеннях

Додайте клас alert-link до будь-яких посилань у полі сповіщення, щоб створити “кольорові посилання”:

<div class="alert alert-success">
  <strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>

See the Pen
Bootstrap 3 Alerts Links
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

Закриття сповіщень

Щоб закрити сповіщення, додайте клас .alert-dismissible до контейнера оповіщення. Потім додайте class="close"і data-dismiss="alert" до посилання або кнопки (при натисканні на дане посилання чи кнопку сповіщення зникне).

See the Pen
Закриття сповіщень
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

Анімовані bootstrap 4 алерти

Класи .fade і .showдодають загасаючий ефект при закритті сповіщення:

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

Якщо ви пропустили минулий урок, то раджу вам його прочитати.

Перекладач: Гронюк Владислав
Посилання на оригінал: https://www.w3schools.com/bootstrap4/bootstrap_alerts.asp

Сподобався урок? Поділись з друзями!

Вам також може сподобатись

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

Повідомити про помилку

Текст, який буде надіслано нашим редакторам: