Source

Оповіщення

Надайте контекстні повідомлення зворотного зв’язку для типових дій користувача за допомогою кількох доступних і гнучких повідомлень попереджень.

Приклади

Сповіщення доступні для будь-якої довжини тексту, а також додаткова кнопка відхилення. Для належного стилю використовуйте один із восьми необхідних контекстних класів (наприклад, .alert-success). Для вбудованого відхилення використовуйте плагін сповіщень jQuery .

<div class="alert alert-primary" role="alert">
  This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  This is a danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  This is a warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  This is a info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  This is a light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  This is a dark alert—check it out!
</div>
Передача значення допоміжним технологіям

Використання кольору для додання значення забезпечує лише візуальну індикацію, яка не буде передана користувачам допоміжних технологій, таких як програми зчитування з екрана. Переконайтеся, що інформація, позначена кольором, або очевидна з самого вмісту (наприклад, видимого тексту), або включена за допомогою альтернативних засобів, таких як додатковий текст, прихований разом із .sr-onlyкласом.

Використовуйте .alert-linkклас утиліти, щоб швидко надати відповідні кольорові посилання в будь-якому сповіщенні.

<div class="alert alert-primary" role="alert">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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>

Звільнення

Використовуючи плагін JavaScript для сповіщень, можна відхилити будь-яке вбудоване сповіщення. Ось як:

  • Переконайтеся, що ви завантажили плагін сповіщень або скомпільований JavaScript Bootstrap.
  • Якщо ви створюєте наш JavaScript із вихідного коду, для цього потрібноutil.js . Зібрана версія включає це.
  • Додайте кнопку відхилення та .alert-dismissibleклас, який додає додаткові відступи праворуч від сповіщення та розміщує .closeкнопку.
  • До кнопки відхилення додайте data-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="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

Поведінка JavaScript

Тригери

Увімкнути відхилення попередження через JavaScript:

$('.alert').alert()

Або за допомогою dataатрибутів на кнопці в сповіщенні , як показано вище:

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

Зауважте, що закриття сповіщення видалить його з DOM.

методи

метод опис
$().alert() Змушує сповіщення прослуховувати події клацання на нащадкових елементах, які мають data-dismiss="alert"атрибут. (Не обов’язково, якщо використовується автоматична ініціалізація data-api.)
$().alert('close') Закриває сповіщення, видаляючи його з DOM. Якщо в елементі присутні класи .fadeand .show, попередження зникне, перш ніж його буде видалено.
$().alert('dispose') Знищує сповіщення елемента. 
$(".alert").alert('close')

Події

Плагін сповіщень Bootstrap відкриває кілька подій для підключення до функції сповіщень.

Подія опис
close.bs.alert Ця подія запускається негайно, коли closeвикликається метод екземпляра.
closed.bs.alert Ця подія запускається, коли сповіщення закрито (очікуватиме завершення переходів CSS). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})