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

Здравице

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

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

Здравице су лагана обавештења дизајнирана да опонашају пусх обавештења која су популаризовала мобилни и десктоп оперативни системи. Направљени су са флексбоксом, тако да их је лако поравнати и позиционирати.

Преглед

Ствари које треба знати када користите додатак за тост:

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

Примери

Басиц

Да бисте подстакли прошириве и предвидљиве здравице, препоручујемо заглавље и тело. Тост заглавља користе display: flex, омогућавајући лако поравнавање садржаја захваљујући нашим услужним програмима маргина и флекбок.

Здравице су флексибилне колико вам је потребно и имају врло мало потребне ознаке. У најмању руку, захтевамо један елемент да садржи ваш „наздрављени“ садржај и снажно подстичемо дугме за одбацивање.

хтмл 
<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>

Користимо следећи ЈаваСцрипт да покренемо нашу демо здравицу уживо:

const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', () => {
    const 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 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, додали прилагођену икону сакривања из Боотстрап икона и користили неке флексбокс услужне програме да бисмо прилагодили изглед.

хтмл 
<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>

Шеме боја

На основу горњег примера, можете креирати различите шеме боја тоста помоћу наших услужних програма за боје и позадину . Овде смо додали .text-bg-primaryдугме .toast, а затим додали .btn-close-whiteдугме за затварање. За оштру ивицу уклањамо подразумевану ивицу помоћу .border-0.

хтмл 
<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>

Постављање

Поставите здравице са прилагођеним ЦСС-ом како вам требају. Горњи десни се често користи за обавештења, као и гор��и средњи. Ако ћете икада показати само једну здравицу одједном, ставите стилове позиционирања тачно на .toast.

Боотстрап пре 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 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 -->
  <!-- - `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 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.

ЦСС

Променљиве

Додато у в5.2.0

Као део Боотстрап-овог еволуирајућег приступа ЦСС варијабли, тостови сада користе локалне ЦСС променљиве .toastза побољшано прилагођавање у реалном времену. Вредности за ЦСС променљиве се постављају преко Сасс-а, тако да је и Сасс прилагођавање и даље подржано.

  --#{$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};

Сасс варијабле

$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);

Употреба

Иницијализујте здравице преко ЈаваСцрипт-а:

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>

Опције

Пошто опције могу да се прослеђују преко атрибута података или ЈаваСцрипт-а, можете додати име опције у data-bs-, као у data-bs-animation="{value}". Обавезно промените тип случаја назива опције из „ цамелЦасе ” у „ кебаб-цасе ” када преносите опције преко атрибута података. На пример, користите data-bs-custom-class="beautifier"уместо data-bs-customClass="beautifier".

Од Боотстрап 5.2.0, све компоненте подржавају експериментални резервисани атрибут података data-bs-configкоји може да садржи једноставну конфигурацију компоненте као ЈСОН стринг. Када елемент има атрибуте data-bs-config='{"delay":0, "title":123}'и data-bs-title="456", коначна titleвредност ће бити 456и одвојени атрибути података ће заменити вредности дате на data-bs-config. Поред тога, постојећи атрибути података могу да садрже ЈСОН вредности попут data-bs-delay='{"show":0,"hide":150}'.

Име Тип Уобичајено Опис
animation боолеан true Примените прелаз ЦСС фаде на здравицу.
autohide боолеан true Аутоматски сакријте здравицу након одлагања.
delay број 5000 Кашњење у милисекундама пре скривања здравице.

Методе

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

Све АПИ методе су асинхроне и покрећу транзицију . Они се враћају позиваоцу чим се транзиција започне, али пре него што се заврши . Поред тога, позив методе за прелазну компоненту биће занемарен .

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

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