Оповіщення
Надайте контекстні повідомлення зворотного зв’язку для типових дій користувача за допомогою кількох доступних і гнучких повідомлень попереджень.
Приклади
Сповіщення доступні для будь-якої довжини тексту, а також додаткова кнопка закриття. Для належного стилю використовуйте один із восьми необхідних контекстних класів (наприклад, .alert-success
). Для вбудованого відхилення використовуйте плагін JavaScript для сповіщень .
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert—check it out!
</div>
Передача значення допоміжним технологіям
Використання кольору для додання значення забезпечує лише візуальну індикацію, яка не буде передана користувачам допоміжних технологій, таких як програми зчитування з екрана. Переконайтеся, що інформація, позначена кольором, або очевидна з самого вмісту (наприклад, видимого тексту), або включена за допомогою альтернативних засобів, таких як додатковий текст, прихований разом із .visually-hidden
класом.
Колір посилання
Використовуйте .alert-link
клас утиліти, щоб швидко надати відповідні кольорові посилання в будь-якому сповіщенні.
<div class="alert alert-primary" role="alert">
A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
Додатковий контент
Сповіщення також можуть містити додаткові елементи HTML, такі як заголовки, абзаци та роздільники.
молодець!
Ой, так, ви успішно прочитали це важливе сповіщення. Цей приклад тексту працюватиме трохи довше, щоб ви могли побачити, як інтервали в сповіщенні працюють із таким вмістом.
Щоразу, коли вам потрібно, обов’язково використовуйте утиліти маржі, щоб зберегти речі гарними та охайними.
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
<hr>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
Ікони
Так само ви можете використовувати утиліти flexbox і піктограми Bootstrap для створення сповіщень із піктограмами. Залежно від ваших значків і вмісту, ви можете додати більше утиліт або користувальницькі стилі.
<div class="alert alert-primary d-flex align-items-center" role="alert">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</svg>
<div>
An example alert with an icon
</div>
</div>
Потрібно більше однієї піктограми для сповіщень? Спробуйте використати більше піктограм Bootstrap і створити локальний спрайт SVG, щоб легко посилатися на ті самі піктограми повторно.
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
</symbol>
<symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
</symbol>
<symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</symbol>
</svg>
<div class="alert alert-primary d-flex align-items-center" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
<div>
An example alert with an icon
</div>
</div>
<div class="alert alert-success d-flex align-items-center" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"/></svg>
<div>
An example success alert with an icon
</div>
</div>
<div class="alert alert-warning d-flex align-items-center" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Warning:"><use xlink:href="#exclamation-triangle-fill"/></svg>
<div>
An example warning alert with an icon
</div>
</div>
<div class="alert alert-danger d-flex align-items-center" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
<div>
An example danger alert with an icon
</div>
</div>
Звільнення
Використовуючи плагін JavaScript для сповіщень, можна відхилити будь-яке вбудоване сповіщення. Ось як:
- Переконайтеся, що ви завантажили плагін сповіщень або скомпільований JavaScript Bootstrap.
- Додайте кнопку закриття та
.alert-dismissible
клас, який додає додаткові відступи праворуч від сповіщення та розміщує кнопку закриття. - На кнопці закриття додайте
data-bs-dismiss="alert"
атрибут, який запускає функцію JavaScript. Обов’язково використовуйте<button>
елемент із ним для належної роботи на всіх пристроях. - Щоб анімувати сповіщення під час їх відхилення, обов’язково додайте класи
.fade
та ..show
Ви можете побачити це в дії за допомогою живої демонстрації:
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
closed.bs.alert
подію та програмно встановлює
focus()
найбільш відповідне місце на сторінці. Якщо ви плануєте перемістити фокус на неінтерактивний елемент, який зазвичай не отримує фокус, обов’язково додайте
tabindex="-1"
до елемента.
Сасс
Змінні
$alert-padding-y: $spacer;
$alert-padding-x: $spacer;
$alert-margin-bottom: 1rem;
$alert-border-radius: $border-radius;
$alert-link-font-weight: $font-weight-bold;
$alert-border-width: $border-width;
$alert-bg-scale: -80%;
$alert-border-scale: -70%;
$alert-color-scale: 40%;
$alert-dismissible-padding-r: $alert-padding-x * 3; // 3x covers width of x plus default padding on either side
Варіант mixin
Використовується в поєднанні з $theme-colors
для створення класів контекстних модифікаторів для наших сповіщень.
@mixin alert-variant($background, $border, $color) {
color: $color;
@include gradient-bg($background);
border-color: $border;
.alert-link {
color: shade-color($color, 20%);
}
}
Петля
Цикл, який генерує класи-модифікатори за допомогою alert-variant()
mixin.
// Generate contextual modifier classes for colorizing the alert.
@each $state, $value in $theme-colors {
$alert-background: shift-color($value, $alert-bg-scale);
$alert-border: shift-color($value, $alert-border-scale);
$alert-color: shift-color($value, $alert-color-scale);
@if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
$alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
}
.alert-#{$state} {
@include alert-variant($alert-background, $alert-border, $alert-color);
}
}
Поведінка JavaScript
Тригери
Увімкнути відхилення попередження через JavaScript:
var alertList = document.querySelectorAll('.alert')
alertList.forEach(function (alert) {
new bootstrap.Alert(alert)
})
Або за допомогою data
атрибутів на кнопці в сповіщенні , як показано вище:
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
Зауважте, що закриття сповіщення видалить його з DOM.
методи
Ви можете створити екземпляр сповіщення за допомогою конструктора сповіщень, наприклад:
var myAlert = document.getElementById('myAlert')
var bsAlert = new bootstrap.Alert(myAlert)
Це змушує сповіщення прослуховувати події клацання на нащадкових елементах, які мають data-bs-dismiss="alert"
атрибут. (Не обов’язково, якщо використовується автоматична ініціалізація data-api.)
метод | опис |
---|---|
close |
Закриває сповіщення, видаляючи його з DOM. Якщо в елементі присутні класи .fade and .show , попередження зникне, перш ніж його буде видалено. |
dispose |
Знищує сповіщення елемента. (Видаляє збережені дані в елементі DOM) |
getInstance |
Статичний метод, який дозволяє вам отримати екземпляр сповіщення, пов’язаний з елементом DOM, ви можете використовувати його так:bootstrap.Alert.getInstance(alert) |
getOrCreateInstance |
Статичний метод, який повертає екземпляр попередження, пов’язаний з елементом DOM, або створює новий, якщо він не був ініціалізований. Ви можете використовувати це так:bootstrap.Alert.getOrCreateInstance(element) |
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()
Події
Плагін сповіщень Bootstrap відкриває кілька подій для підключення до функції сповіщень.
Подія | опис |
---|---|
close.bs.alert |
Спрацьовує негайно, коли close викликається метод екземпляра. |
closed.bs.alert |
Спрацьовує, коли сповіщення закрито та переходи CSS завершено. |
var myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', function () {
// do something, for instance, explicitly move focus to the most appropriate element,
// so it doesn't get lost/reset to the start of the page
// document.getElementById('...').focus()
})