Bootstrap Toasts (Тосты / Уведомления)

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

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

Обзор

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

  • Тосты доступны по соображениям производительности, поэтому вы должны инициализировать их самостоятельно.
  • Тосты автоматически скроются, если вы не укажете autohide: false.
Эффект анимации этого компонента зависит от медиа-запроса prefers-reduced-motion. Смотрите раздел уменьшенное движение в документации по специальным возможностям.

Примеры

Базовые модели

Для поддержки расширяемых и предсказуемых тостов мы рекомендуем использовать заголовок и тело. В заголовках тостов используются display: flex, что позволяет легко выравнивать содержимое благодаря нашим утилитам margin и flexbox.

Тосты настолько гибкие, насколько вам нужно, и требуют очень небольшой разметки. Как минимум, нам требуется, чтобы ваш “поджаренный” контент содержался в одном элементе, и мы настоятельно рекомендуем использовать кнопку "Отклонить".

<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 минут назад</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Привет, мир! Это всплывающее сообщение.
  </div>
</div>
Результат:
Ранее наши скрипты динамически добавляли класс .hide, чтобы полностью скрыть toast (с помощью display:none, а не только с помощью opacity:0). Теперь в этом больше нет необходимости. Однако для обеспечения обратной совместимости наш скрипт будет продолжать переключать класс (даже если в этом нет практической необходимости) до следующей основной версии.

Живой пример

Нажмите кнопку ниже, чтобы отобразить тост (расположенный вместе с нашими утилитами в правом нижнем углу), который был скрыт по умолчанию.

<button type="button" class="btn btn-primary" id="liveToastBtn">Показывать тосты в прямом эфире</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 минут назад</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Привет, мир! Это всплывающее сообщение.
    </div>
  </div>
</div>
Результат:

Бутстрап использует следующий JavaScript для запуска нашей демо-версии live toast:

site/assets/js/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()
  })
}

Полупрозрачные

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

<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 минут назад</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Привет, мир! Это всплывающее сообщение.
  </div>
</div>
Результат:

Укладка

Вы можете укладывать тосты стопкой, завернув их в контейнер для тостов, который увеличит расстояние по вертикали.

<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">только сейчас</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Видишь? Вот так.
    </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 секунды назад</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Внимание, тосты будут складываться автоматически
    </div>
  </div>
</div>
Результат:

Пользовательский контент

Настройте свои тосты, удалив подкомпоненты, настроив их с помощью утилит или добавив собственную разметку. Здесь мы создали более простой тост, удалив стандартный .toast-header, добавив пользовательский значок скрытия из Bootstrap Icons и используя некоторые утилиты flexbox для настройки макета.

<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Привет, мир! Это всплывающее сообщение.
    </div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>
Результат:

Кроме того, вы также можете добавить дополнительные элементы управления и компоненты в toasts.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
    Привет, мир! Это всплывающее сообщение.
    <div class="mt-2 pt-2 border-top">
      <button type="button" class="btn btn-primary btn-sm">Действуйте</button>
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Закрыть</button>
    </div>
  </div>
</div>
Результат:

Цветовые схемы

Основываясь на приведенном выше примере, вы можете создавать различные цветовые схемы тостов с помощью наших утилит color и background. Здесь мы добавили .text-bg-primary к .toast, а затем добавили .btn-close-white к нашей кнопке закрытия. Для более четкого края мы убираем рамку по умолчанию с помощью .border-0.

<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">
      Привет, мир! Это всплывающее сообщение.
    </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.

<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 минут назад</small>
      </div>
      <div class="toast-body">
        Привет, мир! Это всплывающее сообщение.
      </div>
    </div>
  </div>
</div>
Результат:
Bootstrap 11 минут назад
Привет, мир! Это всплывающее сообщение.

Для систем, которые генерируют больше уведомлений, рассмотрите возможность использования элемента переноса, чтобы их можно было легко складывать.

<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">
        Видишь? Именно так.
      </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">
        Внимание, тосты будут складываться автоматически
      </div>
    </div>
  </div>
</div>
Результат:

Вы также можете использовать утилиты flexbox для выравнивания тостов по горизонтали и / или вертикали.

<!-- 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 минут назад</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Привет, мир! Это всплывающее сообщение.
    </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 необходимо добавить кнопку закрытия, чтобы пользователи могли отклонить тосты.

<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 минут назад</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Привет, мир! Это всплывающее сообщение.
  </div>
</div>
Результат:

Хотя технически в ваш toast можно добавлять фокусируемые элементы управления (например, дополнительные кнопки или ссылки), вам не следует делать этого для тостов с автоматическим скрытием. Даже если вы дадите тосту длительный тайм-аут delay, пользователям клавиатуры и вспомогательных технологий может быть трудно вовремя добраться до тостов, чтобы предпринять действия (поскольку тосты не попадают в фокус при их отображении). Если вам абсолютно необходимы дополнительные элементы управления, мы рекомендуем использовать toast с autohide: false.

CSS

Переменные

Добавлено в версии 5.2.0

В рамках развивающегося подхода Bootstrap к CSS-переменным, toasts теперь используют локальные 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 атрибута на кнопке внутри тостов, как показано ниже:

<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}'.

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

Имя Тип По умолчанию Описание
animation логическое значение true Примените к тосту CSS-переход fade.
autohide логическое значение true Автоматически скрывает тосты после задержки.
delay количество 5000 Задержка в миллисекундах перед скрытием тоста.

Методы

Все методы API являются асинхронными и запускают переход. Они возвращаются вызывающей стороне, как только начинается переход, но до его завершения. Кроме того, вызов метода в компоненте перехода будет игнорироваться. Узнайте больше в документации по JavaScript.
Метод Описание
dispose Скрывает toast элемента. Ваш toast останется в DOM, но больше не будет отображаться.
getInstance Статический метод, позволяющий получить экземпляр toast, связанный с элементом DOM.
Например: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl) Возвращает экземпляр toast Bootstrap.
getOrCreateInstance Статический метод, который позволяет вам получить экземпляр toast, связанный с элементом DOM, или создать новый, в случае, если он не был инициализирован.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) Возвращает экземпляр Bootstrap toast.
hide Скрывает тосты элемента. Возвращается вызывающему до того, как тосты были фактически скрыты (т.Е. До того, как произошло hidden.bs.toast событие). Вам придется вручную вызвать этот метод, если вы сделали autohide to false.
isShown Возвращает логическое значение в соответствии с состоянием видимости toast.
show Показывает всплывающее окно элемента. Возвращается вызывающему до того, как всплывающее окно действительно было показано (т.Е. До того, как произойдет shown.bs.toast событие). Вам придется вручную вызвать этот метод, вместо этого ваш 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...
})

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

  1. Обзор
  2. Примеры
    1. Базовые модели
    2. Живой пример
    3. Полупрозрачные
    4. Укладка
    5. Пользовательский контент
    6. Цветовые схемы
  3. Размещение
  4. Специальные возможности
  5. CSS
    1. Переменные
    2. Переменные Sass
  6. Использование
    1. Триггеры
    2. Опции
    3. Методы
    4. События