Как создавать оповещения в 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, в нашем примере мы можем использовать с тегом
.

И код для предупреждающих сообщений приведен ниже. Для простых предупреждений вам не нужно включать файлы сценариев.
<!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>
Окно предупреждения будет выглядеть следующим образом:
Настройка цветов ссылок в предупреждениях
Гиперссылки могут создавать проблемы с видимостью, поскольку цвет ссылки может не синхронизироваться с цветом окна предупреждения. 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>
Окончательный результат должен выглядеть так:

Добавление кнопки закрытия или отклонения в оповещения
На данный момент мы использовали только базовую 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">×</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">×</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">×</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 с предупреждением. Прочтите отдельную статью о том, как использовать отличные шрифтовые иконки с предупреждениями.

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