Прескокнете до главната содржина Прескокнете до навигацијата со документи
in English

Тостови

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

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

Тостовите се лесни известувања дизајнирани да ги имитираат притисни известувањата што се популаризирани од мобилните и десктоп оперативните системи. Тие се изградени со 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.

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

Проѕирен

Тостовите се малку проѕирни за да се спојат со она што е под нив.

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

Bootstrap пред 11 мин
Здраво свету! Ова е тост порака. 
<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 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(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 булови true Нанесете CSS fade премин на тост
autohide булови true Автоматско сокријте го тостот
delay број 5000 Одложете го криењето на тостот (ms)

Методи

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

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

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

покажуваат

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

toast.show()

крие

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

toast.hide()

располага

Сокрива тост од елемент. Вашиот тост ќе остане на 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 () {
  // do something...
})