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

Тостови

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

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

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

Преглед

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

  • Тостовите се избираат од причини за изведба, па мора сами да ги иницијализирате .
  • Тостовите автоматски ќе се сокријат ако не наведете autohide: false.
Ефектот на анимација на оваа компонента зависи од prefers-reduced-motionмедиумското барање. Погледнете го делот за намалено движење од нашата документација за пристапност .

Примери

Основни

За да поттикнете растегливи и предвидливи тостови, препорачуваме заглавие и тело. Заглавија на тост користат display: flex, овозможувајќи лесно усогласување на содржината благодарение на нашите алатки за маргина и 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>

Можете исто така да уживате во флексибилните алатки за да ги усогласите тостовите хоризонтално и/или вертикално.

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

Како дел од пристапот на еволуирачки CSS променливи на Bootstrap, тостовите сега користат локални 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 “ во „ ќебап-футрола “ кога ги пренесувате опциите преку атрибути на податоци. На пример, користете 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 fade премин на тост.
autohide булови true Автоматски сокријте го тостот по доцнењето.
delay број 5000 Одложете за милисекунди пред да го скриете тостот.

Методи

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

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

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

Метод Опис
dispose Сокрива тост од елемент. Вашиот тост ќе остане на DOM, но повеќе нема да се прикажува.
getInstance Статички метод кој ви овозможува да го добиете примерот на тост поврзан со елемент DOM.
На пример: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)Враќа пример за тост од Bootstrap.
getOrCreateInstance Статичен метод кој ви овозможува да го добиете примерот на тост поврзан со елемент DOM или да креирате нов, во случај да не е иницијализиран.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)Враќа пример за тост од Bootstrap.
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...
})