Преминете към основното съдържание Преминете към навигацията с документи
Check
in English

Тостове

Насочени известия към вашите посетители с тост, леко и лесно персонализирано предупредително съобщение.

На тази страница

Тостовете са леки известия, предназначени да имитират насочените известия, които са популяризирани от мобилни и настолни операционни системи. Те са създадени с flexbox, така че са лесни за подравняване и позициониране.

Преглед

Неща, които трябва да знаете, когато използвате приставката за тост:

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

Примери

Основен

За насърчаване на разтегателни и предвидими тостове препоръчваме заглавие и тяло. Тост заглавките използват 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регион . Промените в активните региони (като инжектиране/актуализиране на тост компонент) се съобщават автоматично от екранните четци, без да е необходимо да премествате фокуса на потребителя или по друг начин да го прекъсвате. Освен това включете, 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 Статичен метод, който ви позволява да получите тост екземпляра, свързан с 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...
})