Перейти до основного вмісту Перейти до навігації документами
Check
in English

Оповіщення

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

На цій сторінці

Приклади

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

html 
<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класом.

Живий приклад

Натисніть кнопку нижче, щоб показати сповіщення (приховане за допомогою вбудованих стилів для початку), а потім відхиліть (і знищіть) його за допомогою вбудованої кнопки закриття.

html 
<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>

Ми використовуємо наступний код JavaScript, щоб запустити демонстрацію сповіщень у реальному часі:

const alertPlaceholder = document.getElementById('liveAlertPlaceholder')

const alert = (message, type) => {
  const wrapper = document.createElement('div')
  wrapper.innerHTML = [
    `<div class="alert alert-${type} alert-dismissible" role="alert">`,
    `   <div>${message}</div>`,
    '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
    '</div>'
  ].join('')

  alertPlaceholder.append(wrapper)
}

const alertTrigger = document.getElementById('liveAlertBtn')
if (alertTrigger) {
  alertTrigger.addEventListener('click', () => {
    alert('Nice, you triggered this alert message!', 'success')
  })
}

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

html 
<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, такі як заголовки, абзаци та роздільники.

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 для створення сповіщень із піктограмами. Залежно від ваших значків і вмісту, ви можете додати більше утиліт або користувальницькі стилі.

html 
<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" 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, щоб легко посилатися на ті самі піктограми повторно.

html 
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="check-circle-fill" 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" 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" 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" 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" 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" 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" 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

Ви можете побачити це в дії за допомогою живої демонстрації:

html 
<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>
Якщо сповіщення відхилено, елемент повністю видаляється зі структури сторінки. Якщо користувач клавіатури відхиляє сповіщення за допомогою кнопки закриття, його фокус раптово втрачається та, залежно від браузера, скидається на початок сторінки/документа. З цієї причини ми рекомендуємо включити додатковий JavaScript, який прослуховує closed.bs.alertподію та програмно встановлює focus()найбільш відповідне місце на сторінці. Якщо ви плануєте перемістити фокус на неінтерактивний елемент, який зазвичай не отримує фокус, обов’язково додайте tabindex="-1"до елемента.

CSS

Змінні

Додано у v5.2.0

Як частина змінного підходу Bootstrap до змінних CSS, сповіщення тепер використовують локальні змінні CSS .alertдля покращеного налаштування в реальному часі. Значення для змінних CSS встановлюються через Sass, тому налаштування Sass все ще підтримується.

  --#{$prefix}alert-bg: transparent;
  --#{$prefix}alert-padding-x: #{$alert-padding-x};
  --#{$prefix}alert-padding-y: #{$alert-padding-y};
  --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
  --#{$prefix}alert-color: inherit;
  --#{$prefix}alert-border-color: transparent;
  --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
  --#{$prefix}alert-border-radius: #{$alert-border-radius};

Змінні Sass

$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

Sass mixin

Використовується в поєднанні з $theme-colorsдля створення класів контекстних модифікаторів для наших сповіщень.

@mixin alert-variant($background, $border, $color) {
  --#{$prefix}alert-color: #{$color};
  --#{$prefix}alert-bg: #{$background};
  --#{$prefix}alert-border-color: #{$border};

  @if $enable-gradients {
    background-image: var(--#{$prefix}gradient);
  }

  .alert-link {
    color: shade-color($color, 20%);
  }
}

Sass петля

Цикл, який генерує класи-модифікатори за допомогою 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

Ініціалізувати

Ініціалізувати елементи як сповіщення

const alertList = document.querySelectorAll('.alert')
const alerts = [...alertList].map(element => new bootstrap.Alert(element))

З єдиною метою відхилення сповіщення немає необхідності ініціалізувати компонент вручну через JS API. Використовуючи data-bs-dismiss="alert", компонент буде ініціалізовано автоматично та належним чином закрито.

Додаткову інформацію див . у розділі тригерів .

Тригери

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

<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>

або на кнопці за межами сповіщення, використовуючи, data-bs-targetяк показано нижче:

<button type="button" class="btn-close" data-bs-dismiss="alert" data-bs-target="#my-alert" aria-label="Close"></button>

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

методи

Ви можете створити екземпляр сповіщення за допомогою конструктора сповіщень, наприклад:

const bsAlert = new bootstrap.Alert('#myAlert')

Це змушує сповіщення прослуховувати події клацання на нащадкових елементах, які мають data-bs-dismiss="alert"атрибут. (Не обов’язково, якщо використовується автоматична ініціалізація data-api.)

метод опис
close Закриває сповіщення, видаляючи його з DOM. Якщо в елементі присутні класи .fadeand .show, попередження зникне, перш ніж його буде видалено.
dispose Знищує сповіщення елемента. (Видаляє збережені дані в елементі DOM)
getInstance Статичний метод, який дозволяє отримати екземпляр сповіщення, пов’язаний з елементом DOM. Наприклад: bootstrap.Alert.getInstance(alert).
getOrCreateInstance Статичний метод, який повертає екземпляр попередження, пов’язаний з елементом DOM, або створює новий, якщо його не було ініціалізовано. Ви можете використовувати його так: bootstrap.Alert.getOrCreateInstance(element).

Основне використання:

const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')
alert.close()

Події

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

Подія опис
close.bs.alert Спрацьовує негайно, коли closeвикликається метод екземпляра.
closed.bs.alert Спрацьовує, коли сповіщення закрито та переходи CSS завершено. 
const myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', event => {
  // 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()
})