Перейти к основному контенту Перейти к навигации документации
Просмотреть на GitHub

Тосты

Отправляйте уведомления вашим посетителям с помощью тоста — легкого и легко настраиваемого сообщения-предупреждения.

На этой странице

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

Обзор

Что нужно знать при использовании плагина тостов:

  • Тосты являются опциональными по соображениям производительности, поэтому вы должны инициализировать их самостоятельно.
  • Тосты будут автоматически скрываться, если вы не укажете autohide: false.

Анимационный эффект этого компонента зависит от медиа-запроса prefers-reduced-motion. См. раздел о сокращенном движении в нашей документации по доступности.

Примеры

Основной

Чтобы поощрить расширяемые и предсказуемые тосты, мы рекомендуем заголовок и тело. Заголовки тостов используют display: flex, что позволяет легко выравнивать содержимое благодаря нашим утилитам отступов и 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 для запуска нашего живого демо тоста:

site/src/assets/partials/snippets.js 
const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')

if (toastTrigger) {
  const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
  toastTrigger.addEventListener('click', () => {
    toastBootstrap.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-body-secondary">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-body-secondary">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-body-secondary">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 mins ago
Hello, world! This is a toast message.
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-body-secondary position-relative bd-example-toasts rounded-3">
  <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-body-secondary">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-body-secondary">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 регион. Изменения в живых регионах (такие как внедрение/обновление компонента тоста) автоматически объявляются программами чтения с экрана без необходимости перемещения фокуса пользователя или иного прерывания пользователя. Дополнительно включите 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 также все еще поддерживается.

scss/_toasts.scss 
--#{$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 переменные

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

$toast-header-color:                var(--#{$prefix}secondary-color);
$toast-header-background-color:     rgba(var(--#{$prefix}body-bg-rgb), .85);
$toast-header-border-color:         $toast-border-color;

Использование

Инициализируйте тосты через JavaScript:

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

Триггеры

Закрытие может быть достигнуто с помощью атрибута data-bs-dismiss на кнопке внутри toast, как показано ниже: 

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

или на кнопке вне toast с использованием дополнительного 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}'.

Окончательный объект конфигурации — это объединенный результат data-bs-config, data-bs- и js object, где последний заданный ключ-значение переопределяет другие.

НазваниеТипПо умолчаниюОписание
animationbooleantrueПрименить CSS переход исчезновения к тосту.
autohidebooleantrueАвтоматически скрыть тост после задержки.
delaynumber5000Задержка в миллисекундах перед скрытием тоста.

Методы

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

МетодОписание
disposeСкрывает тост элемента. Ваш тост останется в DOM, но больше не будет отображаться.
getInstanceСтатический метод, который позволяет получить экземпляр тоста, связанный с DOM элементом.
Например: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl) Возвращает экземпляр тоста Bootstrap.
getOrCreateInstanceСтатический метод, который позволяет получить экземпляр тоста, связанный с DOM элементом, или создать новый, в случае если он не был инициализирован.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) Возвращает экземпляр тоста Bootstrap.
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...
})