Тосты

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 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). Это теперь уже не нужно. Однако для обратной совместимости наш скрипт будет продолжать переключать класс (даже если в этом нет практической необходимости) до следующей основной версии.

Живой пример

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

Hello, world! This is a toast message.

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

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
  <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 для запуска нашего демо-тоста в реальном времени:

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

    toast.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-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>

Укладка

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

Видеть? Именно так.

Внимание, тосты будут складываться автоматически

<div class="toast-container">
  <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 и используя некоторые утилиты flexbox для настройки макета.

Привет, мир! Это тост-сообщение.

<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>

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

Привет, мир! Это тост-сообщение.

<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>

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

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

Привет, мир! Это тост-сообщение.

<div class="toast align-items-center text-white 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.

Привет, мир! Это тост-сообщение.

<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 position-absolute 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>

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

Видеть? Именно так.

Внимание, тосты будут складываться автоматически

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `.position-absolute`, `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 position-absolute 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 для выравнивания тостов по горизонтали и/или по вертикали.

Привет, мир! Это тост-сообщение.

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

Привет, мир! Это тост-сообщение.

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

Сасс

Переменные

$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:                1px;
$toast-border-color:                rgba($black, .1);
$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:

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return 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="".

Имя	Тип	По умолчанию	Описание
`animation`	логический	`true`	Примените к всплывающему уведомлению плавный переход CSS
`autohide`	логический	`true`	Автоматически скрывать тост
`delay`	количество	`5000`	Задержка скрытия всплывающего уведомления (мс)

Методы

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

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

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

показывать

Показывает тост элемента. Возвращает вызывающему абоненту до фактического отображения всплывающего уведомления (т. е. до того , как shown.bs.toastпроизойдет событие). Вы должны вручную вызвать этот метод, вместо этого ваш тост не будет отображаться.

toast.show()

Спрятать

Скрывает тост элемента. Возвращает вызывающему объекту до того, как всплывающее уведомление будет фактически скрыто (т. е. до того , как hidden.bs.toastпроизойдет событие). Вы должны вручную вызвать этот метод, если вы autohideсделали false.

toast.hide()

распоряжаться

Скрывает тост элемента. Ваше всплывающее уведомление останется в DOM, но больше не будет отображаться.

toast.dispose()

получить экземпляр

Статический метод, который позволяет вам получить экземпляр всплывающего уведомления, связанный с элементом DOM.

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance

getOrCreateInstance

Статический метод, который позволяет вам получить экземпляр всплывающего уведомления, связанный с элементом DOM, или создать новый, если он не был инициализирован.

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance

События

Тип события	Описание
`show.bs.toast`	Это событие срабатывает сразу же при `show`вызове метода экземпляра.
`shown.bs.toast`	Это событие запускается, когда всплывающее уведомление становится видимым для пользователя.
`hide.bs.toast`	Это событие запускается сразу после `hide`вызова метода экземпляра.
`hidden.bs.toast`	Это событие запускается, когда всплывающее уведомление перестает быть скрытым от пользователя.

var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
})