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

Тости

Push-сповіщення для ваших відвідувачів з тостом, легким і легко настроюваним сповіщенням.

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

Тости — це легкі сповіщення, створені для імітації push-повідомлень, які популяризували мобільні та настільні операційні системи. Вони створені за допомогою flexbox, тому їх легко вирівняти та розташувати.

Огляд

Що потрібно знати під час використання плагіна toast:

  • Тости підключаються з міркувань продуктивності, тому ви повинні ініціалізувати їх самостійно .
  • Тости автоматично приховуються, якщо ви не вкажете autohide: false.
Ефект анімації цього компонента залежить від prefers-reduced-motionмедіа-запиту. Перегляньте розділ про обмежений рух нашої документації щодо спеціальних можливостей .

Приклади

Базовий

Щоб заохочувати розширювані та передбачувані тости, ми рекомендуємо заголовок і тіло. Заголовки Toast використовують display: flex, що дозволяє легко вирівнювати вміст завдяки нашим утилітам margin і flexbox.

Тости настільки гнучкі, як вам потрібно, і мають дуже невелику розмітку. Ми вимагаємо, щоб ваш «підсмажений» вміст містив принаймні один елемент, і ми настійно рекомендуємо кнопку закриття.

html 
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>
Раніше наші сценарії динамічно додавали .hideклас, щоб повністю приховати тост (з display:none, а не просто з opacity:0). Тепер це вже не потрібно. Однак для зворотної сумісності наш сценарій продовжуватиме перемикати клас (хоча в цьому немає практичної потреби) до наступної основної версії.

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

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

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

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

const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', () => {
    const toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}

Напівпрозорий

Тости злегка прозорі, щоб зливатися з тим, що знаходиться під ними.

html 
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Укладання

Ви можете скласти тости, загорнувши їх у контейнер для тостів, який вертикально додасть трохи відстані.

html 
<div class="toast-container position-static">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      See? Just like this.
    </div>
  </div>

  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">2 seconds ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Heads up, toasts will stack automatically
    </div>
  </div>
</div>

Спеціальний контент

Налаштуйте свої тости, видаливши підкомпоненти, налаштувавши їх за допомогою утиліт або додавши власну розмітку. Тут ми створили простіший тост, видаливши значення за замовчуванням .toast-header, додавши спеціальну піктограму приховування з Bootstrap Icons і використовуючи деякі утиліти flexbox для налаштування макета.

html 
<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

Крім того, ви також можете додати додаткові елементи керування та компоненти до тостів.

html 
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
    Hello, world! This is a toast message.
    <div class="mt-2 pt-2 border-top">
      <button type="button" class="btn btn-primary btn-sm">Take action</button>
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
    </div>
  </div>
</div>

Кольорові схеми

Спираючись на наведений вище приклад, ви можете створювати різні схеми кольорів тостів за допомогою наших утиліт кольору та фону . Тут ми додали .text-bg-primaryдо .toast, а потім додали .btn-close-whiteдо нашої кнопки закриття. Для чіткості краю ми видаляємо рамку за замовчуванням за допомогою .border-0.

html 
<div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

Розміщення

Розміщуйте тости за допомогою спеціального CSS, як вам потрібно. Верхній правий часто використовується для сповіщень, як і верхній середній. Якщо ви збираєтеся показувати лише один тост за раз, розмістіть стилі позиціонування прямо на .toast.

Bootstrap 11 хвилин тому
Привіт Світ! Це повідомлення тосту.
html 
<form>
  <div class="mb-3">
    <label for="selectToastPlacement">Toast placement</label>
    <select class="form-select mt-2" id="selectToastPlacement">
      <option value="" selected>Select a position...</option>
      <option value="top-0 start-0">Top left</option>
      <option value="top-0 start-50 translate-middle-x">Top center</option>
      <option value="top-0 end-0">Top right</option>
      <option value="top-50 start-0 translate-middle-y">Middle left</option>
      <option value="top-50 start-50 translate-middle">Middle center</option>
      <option value="top-50 end-0 translate-middle-y">Middle right</option>
      <option value="bottom-0 start-0">Bottom left</option>
      <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
      <option value="bottom-0 end-0">Bottom right</option>
    </select>
  </div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
  <div class="toast-container p-3" id="toastPlacement">
    <div class="toast">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
      </div>
      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>
    </div>
  </div>
</div>

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

html 
<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `top-0` & `end-0` to position the toasts in the upper right corner -->
  <!-- - `.p-3` to prevent the toasts from sticking to the edge of the container  -->
  <div class="toast-container top-0 end-0 p-3">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        See? Just like this.
      </div>
    </div>

    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        Heads up, toasts will stack automatically
      </div>
    </div>
  </div>
</div>

Ви також можете скористатися утилітами flexbox, щоб вирівняти тости горизонтально та/або вертикально.

html 
<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Доступність

Тости мають на меті невелике переривання ваших відвідувачів або користувачів, тому, щоб допомогти тим, хто має програми зчитування з екрана та подібні допоміжні технології, ви повинні обернути свої тости в aria-liveрегіон . Зміни в активних регіонах (наприклад, ін’єкція/оновлення компонента toast) автоматично оголошуються програмами зчитування з екрана без необхідності переміщувати фокус користувача чи іншим чином переривати його. Крім того, включіть, aria-atomic="true"щоб гарантувати, що весь тост завжди оголошується як єдиний (атомарний) блок, а не просто повідомляє про те, що було змінено (що може призвести до проблем, якщо ви оновлюєте лише частину вмісту тосту або якщо відображається той самий вміст тосту у більш пізній момент часу). Якщо потрібна інформація важлива для процесу, наприклад, для списку помилок у формі, тоді використовуйте компонент сповіщеннязамість тосту.

Зауважте, що активна область має бути присутня в розмітці перед тим , як буде створено або оновлено тост. Якщо ви динамічно генеруєте обидва одночасно та вставляєте їх на сторінку, вони, як правило, не будуть оголошені допоміжними технологіями.

Вам також потрібно адаптувати рівень roleі aria-liveзалежно від вмісту. Якщо це важливе повідомлення, як-от помилка, використовуйте role="alert" aria-live="assertive", інакше використовуйте role="status" aria-live="polite"атрибути.

Оскільки вміст, який ви відображаєте, змінюється, не забудьте оновити час delayочікування , щоб користувачі мали достатньо часу, щоб прочитати тост.

<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-bs-delay="10000">
  <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>

Якщо ви використовуєте autohide: false, ви повинні додати кнопку закриття, щоб дозволити користувачам відхиляти тост.

html 
<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Хоча технічно можливо додати елементи керування (наприклад, додаткові кнопки чи посилання) у ваш тост, вам слід уникати цього для автоматичних приховуваних тостів. Навіть якщо ви дасте тосту тривалий час delayочікування , користувачам клавіатури та допоміжних технологій може бути важко вчасно дістатися до тосту, щоб виконати дію (оскільки тости не отримують фокус, коли вони відображаються). Якщо вам абсолютно необхідні додаткові елементи керування, ми рекомендуємо використовувати тост із autohide: false.

CSS

Змінні

Додано у v5.2.0

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

  --#{$prefix}toast-zindex: #{$zindex-toast};
  --#{$prefix}toast-padding-x: #{$toast-padding-x};
  --#{$prefix}toast-padding-y: #{$toast-padding-y};
  --#{$prefix}toast-spacing: #{$toast-spacing};
  --#{$prefix}toast-max-width: #{$toast-max-width};
  @include rfs($toast-font-size, --#{$prefix}toast-font-size);
  --#{$prefix}toast-color: #{$toast-color};
  --#{$prefix}toast-bg: #{$toast-background-color};
  --#{$prefix}toast-border-width: #{$toast-border-width};
  --#{$prefix}toast-border-color: #{$toast-border-color};
  --#{$prefix}toast-border-radius: #{$toast-border-radius};
  --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
  --#{$prefix}toast-header-color: #{$toast-header-color};
  --#{$prefix}toast-header-bg: #{$toast-header-background-color};
  --#{$prefix}toast-header-border-color: #{$toast-header-border-color};

Змінні Sass

$toast-max-width:                   350px;
$toast-padding-x:                   .75rem;
$toast-padding-y:                   .5rem;
$toast-font-size:                   .875rem;
$toast-color:                       null;
$toast-background-color:            rgba($white, .85);
$toast-border-width:                $border-width;
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$toast-border-radius:               $border-radius;
$toast-box-shadow:                  $box-shadow;
$toast-spacing:                     $container-padding-x;

$toast-header-color:                $gray-600;
$toast-header-background-color:     rgba($white, .85);
$toast-header-border-color:         rgba($black, .05);

Використання

Ініціалізація тостів через JavaScript:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))

Тригери

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

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

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

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

Опції

Оскільки параметри можна передати через атрибути даних або JavaScript, ви можете додати назву параметра до data-bs-, як у data-bs-animation="{value}". Обов’язково змініть тип регістру назви параметра з « camelCase » на « kebab-case » під час передачі параметрів через атрибути даних. Наприклад, використовуйте data-bs-custom-class="beautifier"замість data-bs-customClass="beautifier".

Починаючи з Bootstrap 5.2.0, усі компоненти підтримують експериментальний зарезервований атрибут даних data-bs-config, який може зберігати просту конфігурацію компонента як рядок JSON. Якщо елемент має атрибути data-bs-config='{"delay":0, "title":123}'і data-bs-title="456", остаточне titleзначення буде таким, 456а окремі атрибути даних замінять значення, надані в data-bs-config. Крім того, наявні атрибути даних можуть містити такі значення JSON, як data-bs-delay='{"show":0,"hide":150}'.

Ім'я Тип За замовчуванням опис
animation логічний true Застосуйте CSS-зникнення переходу до тосту.
autohide логічний true Автоматично приховати тост після затримки.
delay номер 5000 Затримка в мілісекундах, перш ніж приховати тост.

методи

Асинхронні методи та переходи

Усі методи API є асинхронними та починають перехід . Вони повертаються до абонента, щойно перехід починається, але до його завершення . Крім того, виклик методу компонента, що переходить, ігноруватиметься .

Дивіться нашу документацію JavaScript для отримання додаткової інформації .

метод опис
dispose Приховує тост елемента. Ваш тост залишиться в DOM, але більше не відображатиметься.
getInstance Статичний метод, який дозволяє отримати екземпляр toast, пов’язаний з елементом DOM.
Наприклад: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)повертає екземпляр Bootstrap toast.
getOrCreateInstance Статичний метод, який дозволяє отримати екземпляр toast, пов’язаний з елементом DOM, або створити новий, якщо він не був ініціалізований.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)Повертає екземпляр Bootstrap toast.
hide Приховує тост елемента. Повертається до абонента до того, як тост буде фактично приховано (тобто до того , як відбудеться hidden.bs.toastподія). Ви повинні вручну викликати цей метод, якщо ви перейшли autohideдо false.
isShown Повертає логічне значення відповідно до стану видимості тосту.
show Розкриває тост елемента. Повертається до абонента до того, як тост буде фактично показано (тобто до shown.bs.toastподії). Ви повинні вручну викликати цей метод, натомість ваш тост не відображатиметься.

Події

Подія опис
hide.bs.toast Ця подія запускається негайно після hideвиклику методу екземпляра.
hidden.bs.toast Ця подія запускається, коли тост закінчується приховуванням від користувача.
show.bs.toast Ця подія запускається негайно, коли showвикликається метод екземпляра.
shown.bs.toast Ця подія запускається, коли тост стає видимим для користувача. 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})