Как создавать оповещения в Bootstrap 5?

<

div itemprop=»articleBody»>

Предупреждающие сообщения очень популярны в JavaScript для предоставления пользователям интерактивной информации. Он используется для проверки формы и отправки сообщений в браузер. Однако вы также можете использовать предупреждения с CSS для отображения статических сообщений, исключив файлы сценариев. Многие темы и плагины также используют платформу Bootstrap для отображения этих предупреждающих сообщений. В этой статье мы объясним, как создавать различные типы предупреждений Bootstrap.

Bootstrap 3 против Bootstrap 4 и 5 предупреждений

В Bootstrap версии 3 было четыре цветных предупреждения, но в Bootstrap версий 4 и 5 всего 8 типов предупреждений. Ниже приведен список контекстных классов, используемых в версиях Bootstrap 5.

CSS-классЦель
тревогаБазовый класс предупреждений, используемый для добавления границы, поля и дна к другим классам предупреждений.
оповещение оповещение-первичноеИспользуется для создания предупреждения с основным цветом.
оповещение оповещение вторичноеИспользуется для создания оповещения с вторичным.
оповещение оповещение-успехИспользуется для создания предупреждения со светло-зеленым цветом, указывающего на положительное действие.
оповещение оповещение-информацияИнформационное сообщение небесно-голубого цвета.
предупреждение предупреждение опасностьСообщение об опасности, остановке или негативных действиях.
предупреждение предупреждение-предупреждениеОриентировочное предупреждающее сообщение.
предупредительный световой сигналОриентировочное более светлое сообщение.
бдительный бдительный-темноОриентировочное более темное сообщение.

Выделенные четыре типа добавлены недавно, начиная с версии 4.

Оповещения Bootstrap

Ниже показано, как будут выглядеть предупреждающие сообщения на опубликованном веб-сайте. Классы предупреждений можно использовать с любым из Элемент блока HTML, в нашем примере мы можем использовать с тегом

.

Примеры предупреждений Bootstrap 4

И код для предупреждающих сообщений приведен ниже. Для простых предупреждений вам не нужно включать файлы сценариев.

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 5 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<!-- Start of Alerts -->
<div class="alert alert-primary" role="alert">
  This is a primary alert message to show some detail.
</div>
<div class="alert alert-secondary" role="alert">
  This is a secondary alert message to show some detail.
</div>
<div class="alert alert-success" role="alert">
  This is a success message to show positive action.
</div>
<div class="alert alert-info" role="alert">
  This is an information message to show more detail.
</div>
<div class="alert alert-warning" role="alert">
  This is a warning alert to indicate a warning before trying.
</div>
<div class="alert alert-danger" role="alert">
  This is a danger alert to tell users stop doing things.
</div>
<div class="alert alert-light" role="alert">
  This is a light alert to tell users stop doing things.
</div>
<div class="alert alert-dark" role="alert">
  This is a dark alert to tell users stop doing things.
</div>
<!-- End of Alerts -->
<!-- Bootstrap 5 Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>

Использование различного содержания в предупреждениях

Вы можете использовать большинство HTML-элементов в окнах предупреждений, используя специальные классы для заголовков и ссылок. Используйте теги HTML по умолчанию для абзацев и других элементов типографики. Давайте создадим абзац с заголовком и образцом изображения внутри окна предупреждения об успехе.

<div class="alert alert-success" role="alert">
<h5 class="alert-heading">This is Alert Heading</h5>
<p>You can enter any text message to convey to your users and below is an image.</p>
<img src="https://img.webnots.com/2017/04/Manage-Multiple-Blogs.jpg">
</div>

Окно предупреждения будет выглядеть следующим образом:

Оповещения с элементами HTML

Гиперссылки могут создавать проблемы с видимостью, поскольку цвет ссылки может не синхронизироваться с цветом окна предупреждения. Bootstrap решает эту проблему, предоставляя служебный класс «alert-link» для наследования цвета ссылки от цвета предупреждения.

Использование класса «alert-link» должно быть таким, как показано ниже:

<div class="alert alert-primary" role="alert">
  This is a primary alert and <a href="https://www.webnots.com/bootstrap-alerts-tutorial/#" class="alert-link">here is a link with primary color</a>.
</div>
<div class="alert alert-secondary" role="alert">
  This is a secondary alert and <a href="https://www.webnots.com/bootstrap-alerts-tutorial/#" class="alert-link">here is a link with secondary color</a>.
</div>
<div class="alert alert-success" role="alert">
  This is a success alert and <a href="https://www.webnots.com/bootstrap-alerts-tutorial/#" class="alert-link">here is a link with success color</a>.
</div>
<div class="alert alert-info" role="alert">
  This is an info alert and <a href="https://www.webnots.com/bootstrap-alerts-tutorial/#" class="alert-link">here is a link with info color</a>.
</div>
<div class="alert alert-warning" role="alert">
  This is a warning alert and <a href="https://www.webnots.com/bootstrap-alerts-tutorial/#" class="alert-link">here is a link with warning color</a>.
</div>
<div class="alert alert-danger" role="alert">
  This is a danger alert and <a href="https://www.webnots.com/bootstrap-alerts-tutorial/#" class="alert-link">here is a link with danger color</a>.
</div>
<div class="alert alert-light" role="alert">
  This is a light alert and <a href="https://www.webnots.com/bootstrap-alerts-tutorial/#" class="alert-link">here is a link with light color</a>.
</div>
<div class="alert alert-dark" role="alert">
  This is a dark alert and <a href="https://www.webnots.com/bootstrap-alerts-tutorial/#" class="alert-link">here is a link with dark color</a>.
</div>

Окончательный результат должен выглядеть так:

Оповещения Bootstrap 5
Оповещения Bootstrap 5

Добавление кнопки закрытия или отклонения в оповещения

На данный момент мы использовали только базовую CSS-структуру Bootstrap для создания предупреждений. Эти предупреждения CSS статичны, и их нельзя закрыть. Доступны специальные плагины jQuery для создания запрещенных предупреждений с помощью кнопки «X» в правом конце предупреждения. Вам не нужно запускать эти плагины, скомпилированный Bootstrap JavaScript и CSS-фреймворк сделают за вас волшебство.

Ниже приведено предупреждение с кнопкой закрытия. После нажатия кнопки «X» предупреждение исчезнет, ​​а содержимое ниже переместится вверх, чтобы отобразить содержимое в привлекательной форме без большого промежутка.

Оповещение с кнопкой

Ниже приведен код запрещенного предупреждения:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="close">
<span aria-hidden="true">&times;</span>
</button>
Click on the "x" button on the right to close this alert box.
</div>

Объяснение классов и атрибутов, используемых для создания оповещения с кнопкой закрытия:

  • Значок закрытия «X» — это, по сути, кнопка с классом «.close». Это необходимо для обеспечения правильного внешнего вида на всех устройствах.
  • У кнопки есть атрибут «data-dismiss =» alert », который запускает функцию JavaScript для закрытия оповещения.
  • «& Раз;» — это escape-сущность HTML, которая будет отображаться в браузере как кнопка «X».
  • Атрибут «aria-label =» close »используется для улучшения доступности для программ чтения с экрана, чтобы указать кнопку закрытия.
  • Класс «.alert-dishibited» используется для создания необходимого отступа справа от кнопки закрытия.
  • Классы «.fade» и «.show» используются для создания эффектов анимации.

Использование JavaScript для отклонения

Окно предупреждения можно закрыть вручную с помощью триггера JavaScript, как показано ниже:

<div class="alert alert-success alert-dismissible" id="alert1">
<a href="https://www.webnots.com/bootstrap-alerts-tutorial/#" class="close">&times;</a>
Click on the "x" button on the right to close this alert box.
</div>
<script>
var alertList = document.querySelectorAll('.alert') alertList.forEach(function (alert) {   new bootstrap.Alert(alert) })
</script>

Сценарий оповещения начальной загрузки имеет следующие два события:

МероприятиеОписание
close.bs.alertЭто срабатывает сразу после нажатия кнопки закрытия.
closed.bs.alertЭто срабатывает, когда предупреждение закрывается.

Ниже приведен код для создания предупреждения при нажатии кнопки закрытия.

<div class="alert alert-danger alert-dismissible" id="alert2">
<a href="https://www.webnots.com/bootstrap-alerts-tutorial/#" class="close">&times;</a>
Click on the "x" button on the right to close this alert box.
</div>
<script>
$(document).ready(function(){
$(".close").click(function(){
$("#alert2").alert("close");
});
$("#alert2").on('close.bs.alert', function(){
alert('The alert message is about to be closed.');
});
});
</script>

Точно так же вы можете использовать событие closed.bs.alert для запуска всплывающего окна при закрытии предупреждения.

Использование значков в предупреждениях

Глификоны не поддерживаются в Bootstrap 4, но вы можете использовать значки Bootstrap, значки font awesome или любые другие значки SVG с компонентом предупреждения.

Использование значков Bootstrap

Версия 5 содержит 1330+ встроенных значков в формате SVG и веб-шрифтов. Это лучший вариант, так как он прекрасно сочетается с другими элементами. Ниже приведен пример использования значка Bootstrap с компонентом предупреждения.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<div class="alert alert-info" role="alert">
<i class="bi bi-check-circle-fill"></i>
This is a warning alert and <a href="https://www.webnots.com/bootstrap-alerts-tutorial/#" class="alert-link">here is a link with warning color</a>.
</div>
</body>
</html>

Ниже показано, как это будет выглядеть в браузере.

Уведомление о загрузке со значком

Использование Font Awesome с предупреждениями Bootstrap

Ниже приведены некоторые примеры использования значка font awesome с предупреждением. Прочтите отдельную статью о том, как использовать отличные шрифтовые иконки с предупреждениями.

Уведомления со значками Font Awesome

Использование изображения значка с предупреждениями

Размещение значков шрифтов на вашем собственном сайте может быть сложной задачей. В таком случае вместо значков шрифтов вы можете использовать небольшие изображения перед компонентами предупреждений, как показано ниже.

Уведомления с изображениями значков

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *