Тостови

Притиснете ги известувањата до вашите посетители со тост, лесна и лесно приспособлива порака за предупредување.

На оваа страница

Тостовите се лесни известувања дизајнирани да ги имитираат притисни известувањата кои се популаризирани од мобилните и десктоп оперативните системи. Тие се изградени со flexbox, така што лесно се порамнуваат и поставуваат.

Преглед

Работи што треба да ги знаете кога го користите приклучокот за тост:

Тостовите се избираат од причини за изведба, па мора сами да ги иницијализирате .
Тостовите автоматски ќе се сокријат ако не наведете autohide: false.

Ефектот на анимација на оваа компонента зависи од prefers-reduced-motionмедиумското барање. Погледнете го делот за намалено движење од нашата документација за пристапност .

Примери

Основни

За да поттикнете растегливи и предвидливи тостови, препорачуваме заглавие и тело. Заглавија на тост користат display: flex, овозможувајќи лесно усогласување на содржината благодарение на нашите алатки за маргина и 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 Icons и користење на некои услужни програми на 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 fade премин на тост
`autohide`	булови	`true`	Автоматско сокријте го тостот
`delay`	број	`5000`	Одложете го криењето на тостот (ms)

Методи

Асинхрони методи и транзиции

Сите API методи се асинхрони и започнуваат транзиција . Тие се враќаат кај повикувачот штом ќе започне транзицијата, но пред да заврши . Дополнително, повик на метод на компонента во транзиција ќе се игнорира .

Погледнете ја нашата JavaScript документација за повеќе информации .

покажуваат

Открива тост на елемент. Се враќа кај повикувачот пред всушност да се прикаже тостот (т.е. пред да се shown.bs.toastслучи настанот). Мора рачно да го повикате овој метод, наместо тоа, вашиот тост нема да се прикаже.

toast.show()

крие

Сокрива тост од елемент. Се враќа кај повикувачот пред тостот всушност да биде скриен (т.е. пред да се hidden.bs.toastслучи настанот). Мора рачно да го повикате овој метод ако сте го autohideнаправиле false.

toast.hide()

располага

Сокрива тост од елемент. Вашиот тост ќе остане на ДОМ, но повеќе нема да се прикажува.

toast.dispose()

getInstance

Статички метод кој ви овозможува да го добиете примерот на тост поврзан со елемент DOM

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

getOrCreateInstance

Static method which allows you to get the toast instance associated with a DOM element, or create a new one in case it wasn’t initialized

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

Events

Event type	Description
`show.bs.toast`	This event fires immediately when the `show` instance method is called.
`shown.bs.toast`	This event is fired when the toast has been made visible to the user.
`hide.bs.toast`	This event is fired immediately when the `hide` instance method has been called.
`hidden.bs.toast`	This event is fired when the toast has finished being hidden from the user.

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