Оповіщення
Надайте контекстні повідомлення зворотного зв’язку для типових дій користувача за допомогою кількох доступних і гнучких повідомлень попереджень.
Приклади
Сповіщення доступні для будь-якої довжини тексту, а також додаткова кнопка відхилення. Для належного стилю використовуйте один із восьми необхідних контекстних класів (наприклад, .alert-success
). Для вбудованого відхилення використовуйте плагін сповіщень jQuery .
Передача значення допоміжним технологіям
Використання кольору для додання значення забезпечує лише візуальну індикацію, яка не буде передана користувачам допоміжних технологій, таких як програми зчитування з екрана. Переконайтеся, що інформація, позначена кольором, або очевидна з самого вмісту (наприклад, видимого тексту), або включена за допомогою альтернативних засобів, таких як додатковий текст, прихований разом із .sr-only
класом.
Колір посилання
Використовуйте .alert-link
клас утиліти, щоб швидко надати відповідні кольорові посилання в будь-якому сповіщенні.
Додатковий контент
Сповіщення також можуть містити додаткові елементи HTML, такі як заголовки, абзаци та роздільники.
молодець!
Ой, так, ви успішно прочитали це важливе сповіщення. Цей приклад тексту працюватиме трохи довше, щоб ви могли побачити, як інтервали в сповіщенні працюють із таким вмістом.
Щоразу, коли вам потрібно, обов’язково використовуйте утиліти маржі, щоб зберегти речі гарними та охайними.
Звільнення
Використовуючи плагін JavaScript для сповіщень, можна відхилити будь-яке вбудоване сповіщення. Ось як:
- Переконайтеся, що ви завантажили плагін сповіщень або скомпільований JavaScript Bootstrap.
- Якщо ви створюєте наш JavaScript із вихідного коду, для цього потрібно
util.js
. Зібрана версія включає це. - Додайте кнопку відхилення та
.alert-dismissible
клас, який додає додаткові відступи праворуч від сповіщення та розміщує.close
кнопку. - До кнопки відхилення додайте
data-dismiss="alert"
атрибут, який запускає функцію JavaScript. Обов’язково використовуйте<button>
елемент із ним для належної роботи на всіх пристроях. - Щоб анімувати сповіщення під час їх відхилення, обов’язково додайте класи
.fade
та ..show
Ви можете побачити це в дії за допомогою живої демонстрації:
Поведінка JavaScript
Тригери
Увімкнути відхилення попередження через JavaScript:
Або за допомогою data
атрибутів на кнопці в сповіщенні , як показано вище:
Зауважте, що закриття сповіщення видалить його з DOM.
методи
метод | опис |
---|---|
$().alert() |
Змушує сповіщення прослуховувати події клацання на нащадкових елементах, які мають data-dismiss="alert" атрибут. (Не обов’язково, якщо використовується автоматична ініціалізація data-api.) |
$().alert('close') |
Закриває сповіщення, видаляючи його з DOM. Якщо в елементі присутні класи .fade and .show , попередження зникне, перш ніж його буде видалено. |
$().alert('dispose') |
Знищує сповіщення елемента. |
Події
Плагін сповіщень Bootstrap відкриває кілька подій для підключення до функції сповіщень.
Подія | опис |
---|---|
close.bs.alert |
Ця подія запускається негайно, коли close викликається метод екземпляра. |
closed.bs.alert |
Ця подія запускається, коли сповіщення закрито (очікуватиме завершення переходів CSS). |