Перейти к основному содержанию Перейти к навигации по документации
Оригинал Посмотреть на GitHub

Всплывающие сообщения

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

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

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

Обзор

Что нужно знать при использовании плагина всплывающих сообщений:

  • Всплывающие сообщения включены по соображениям производительности, поэтому Вы должны инициализировать их самостоятельно.
  • Всплывающие сообщения будут автоматически скрываться, если Вы не укажете 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="Закрыть"></button>
  </div>
  <div class="toast-body">
    Привет мир! Это тост-сообщение.
  </div>
</div>

Лайв

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

<button type="button" class="btn btn-primary" id="liveToastBtn">Показать лайв тосты</button>

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
  <div id="liveToast" class="toast hide" 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="Закрыть"></button>
    </div>
    <div class="toast-body">
      Привет, мир! Это тост-сообщение.
    </div>
  </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">11 мин. назад</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Закрыть"></button>
  </div>
  <div class="toast-body">
    Привет мир! Это тост-сообщение.
  </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">прямо сейчас</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Закрыть"></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-muted">2 секунды назад</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Закрыть"></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="Закрыть"></button>
  </div>
</div>

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

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

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

Основываясь на приведенном выше примере, Вы можете создавать различные цветовые схемы тостов с помощью наших утилит цвета и фона. Здесь мы добавили .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">
      Привет, мир! Это тост-сообщение.
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Закрыть"></button>
  </div>
</div>

Размещение

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

Bootstrap 11 мин назад
Привет мир! Это тост-сообщение. 
<form>
  <div class="mb-3">
    <label for="selectToastPlacement">Размещение тостов</label>
    <select class="form-select mt-2" id="selectToastPlacement">
      <option value="" selected>Выберите позицию...</option>
      <option value="top-0 start-0">Верх слева</option>
      <option value="top-0 start-50 translate-middle-x">Верх по центру</option>
      <option value="top-0 end-0">Верх справа</option>
      <option value="top-50 start-0 translate-middle-y">Середина слева</option>
      <option value="top-50 start-50 translate-middle">Середина по центру</option>
      <option value="top-50 end-0 translate-middle-y">Середина справа</option>
      <option value="bottom-0 start-0">Низ слева</option>
      <option value="bottom-0 start-50 translate-middle-x">Низ по центру</option>
      <option value="bottom-0 end-0">Низ справа</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 мин назад</small>
      </div>
      <div class="toast-body">
        Привет мир! Это тост-сообщение.
      </div>
    </div>
  </div>
</div>

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

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Позиционируйте его: -->
  <!-- - `.toast-container` для промежутка между тостами -->
  <!-- - `.position-absolute`, `top-0` & `end-0` чтобы тосты располагались в правом верхнем углу -->
  <!-- - `.p-3` чтобы тосты не прилипали к краю контейнера  -->
  <div class="toast-container position-absolute top-0 end-0 p-3">

    <!-- Затем положите тосты внутрь -->
    <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="Закрыть"></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-muted">2 секунды назад</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Закрыть"></button>
      </div>
      <div class="toast-body">
        Внимание, тосты складываются автоматически
      </div>
    </div>
  </div>
</div>

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

<!-- Контейнер Flexbox для выравнивания тостов -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">

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

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

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

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

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

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, option)
})

Параметры

Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к data-bs-, как в data-bs-animation="".

Наименование Тип По умолчанию Описание
animation boolean true Применить переход CSS fade к тосту
autohide boolean true Автоматически скрывать тост
delay number 5000 Задержка скрытия тоста (мс)

Методы

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

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

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

show

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

toast.show()

hide

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

toast.hide()

dispose

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

toast.dispose()

getInstance

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

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

getOrCreateInstance

Статический метод, который позволяет вам получить экземпляр scrollspy, связанный с элементом 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 () {
  // сделайте что-нибудь...
})