Prijeđi na glavni sadržaj Prijeđi na navigaciju dokumentima
Check
in English

Zdravice

Push obavijesti svojim posjetiteljima uz zdravicu, laganu i lako prilagodljivu poruku upozorenja.

Na ovoj stranici

Zdravice su lagane obavijesti dizajnirane da oponašaju push obavijesti koje su popularizirali mobilni i desktop operativni sustavi. Izrađeni su od flexboxa, tako da ih je lako poravnati i postaviti.

Pregled

Stvari koje treba znati kada koristite dodatak za tost:

  • Toastovi su opt-in zbog performansi, tako da ih morate sami inicijalizirati .
  • Tostovi će se automatski sakriti ako ne navedete autohide: false.
Učinak animacije ove komponente ovisi o prefers-reduced-motionmedijskom upitu. Pogledajte odjeljak smanjenog kretanja u našoj dokumentaciji o pristupačnosti .

Primjeri

Osnovni, temeljni

Kako bismo potaknuli proširive i predvidljive zdravice, preporučujemo zaglavlje i tijelo. Toast zaglavlja koriste display: flex, omogućujući jednostavno usklađivanje sadržaja zahvaljujući našim uslužnim programima za margine i flexbox.

Toastovi su fleksibilni koliko vam je potrebno i imaju vrlo malo potrebne oznake. Minimalno zahtijevamo da jedan element sadrži vaš "prepečeni" sadržaj i snažno potičemo gumb za odbacivanje.

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>
Prethodno su naše skripte dinamički dodavale .hideklasu kako bi potpuno sakrile tost (s display:none, umjesto samo s opacity:0). Ovo sada više nije potrebno. Međutim, radi kompatibilnosti unatrag, naša skripta nastavit će mijenjati klasu (iako za to nema praktične potrebe) do sljedeće glavne verzije.

Živi primjer

Pritisnite donji gumb za prikaz tosta (postavljenog s našim uslužnim programima u donjem desnom kutu) koji je prema zadanim postavkama skriven.

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

Koristimo sljedeći JavaScript za pokretanje naše demo tost uživo:

const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', () => {
    const toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}

Proziran

Tostovi su blago prozirni kako bi se stopili s onim što je ispod njih.

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>

Slaganje

Tostove možete složiti tako da ih zamotate u posudu za tost, što će okomito dodati razmak.

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>

Prilagođeni sadržaj

Prilagodite svoje tostove uklanjanjem podkomponenti, podešavanjem pomoću uslužnih programa ili dodavanjem vlastite oznake. Ovdje smo stvorili jednostavniji tost uklanjanjem zadane postavke .toast-header, dodavanjem prilagođene ikone za skrivanje iz Bootstrap Icons i korištenjem nekih uslužnih programa flexboxa za prilagodbu izgleda.

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>

Alternativno, tostovima možete dodati dodatne kontrole i komponente.

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>

Sheme boja

Nadovezujući se na gornji primjer, možete stvoriti različite sheme boja tosta s našim uslužnim programima za boju i pozadinu . Ovdje smo dodali .text-bg-primaryna .toast, a zatim dodali .btn-close-whitena naš gumb za zatvaranje. Za oštriji rub, uklanjamo zadani obrub pomoću .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>

Plasman

Postavite zdravice s prilagođenim CSS-om onako kako ih trebate. Gornji desni često se koristi za obavijesti, kao i gornji srednji. Ako ćete ikad prikazivati ​​samo jedan tost odjednom, postavite stilove pozicioniranja točno na .toast.

Bootstrap prije 11 minuta
Pozdrav svijete! Ovo je zdravica.
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>

Za sustave koji generiraju više obavijesti, razmislite o korištenju elementa za omatanje kako bi se mogli jednostavno slagati.

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>

Također možete postati fensi s uslužnim programima flexbox za vodoravno i/ili okomito poravnavanje tosta.

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>

Pristupačnost

Zdravice su namijenjene malim prekidima za vaše posjetitelje ili korisnike, tako da biste pomogli onima koji imaju čitače zaslona i slične pomoćne tehnologije, trebali biste zamotati svoje zdravice u aria-liveregiju . Promjene živih regija (kao što je ubacivanje/ažuriranje toast komponente) automatski se najavljuju od strane čitača zaslona bez potrebe za pomicanjem fokusa korisnika ili na drugi način prekidanjem korisnika. Osim toga, uključite aria-atomic="true"kako biste osigurali da se cijela zdravica uvijek najavljuje kao jedna (atomska) jedinica, umjesto da se samo najavljuje što je promijenjeno (što bi moglo dovesti do problema ako ažurirate samo dio sadržaja zdravice ili ako prikazujete isti sadržaj zdravice u kasnijoj točki vremena). Ako su potrebne informacije važne za proces, npr. za popis pogrešaka u obrascu, tada koristite komponentu upozorenjaumjesto dvopeka.

Imajte na umu da živa regija mora biti prisutna u označavanju prije nego što se tost generira ili ažurira. Ako dinamički generirate oboje u isto vrijeme i umetnete ih na stranicu, općenito ih neće objaviti pomoćne tehnologije.

Također trebate prilagoditi razinu rolei aria-liveovisno o sadržaju. Ako se radi o važnoj poruci poput pogreške, upotrijebite role="alert" aria-live="assertive", inače upotrijebite role="status" aria-live="polite"atribute.

Kako se sadržaj koji prikazujete mijenja, svakako ažurirajte delayvremensko ograničenje kako bi korisnici imali dovoljno vremena za čitanje tosta.

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

Kada koristite autohide: false, morate dodati gumb za zatvaranje kako bi korisnici mogli odbaciti tost.

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>

Iako je tehnički moguće dodati kontrole koje se mogu fokusirati/djelovati (kao što su dodatni gumbi ili veze) u vaš tost, trebali biste to izbjegavati za tostove koji se automatski skrivaju. Čak i ako zdravici date dugo delayvremensko ograničenje , korisnicima tipkovnice i pomoćne tehnologije može biti teško doći do zdravice na vrijeme da poduzmu radnju (budući da zdravice ne dobivaju fokus kada su prikazane). Ako apsolutno morate imati dodatne kontrole, preporučujemo korištenje tosta s autohide: false.

CSS

Varijable

Dodano u v5.2.0

Kao dio Bootstrapovog pristupa CSS varijablama koji se razvija, tostovi sada koriste lokalne CSS varijable .toastza poboljšanu prilagodbu u stvarnom vremenu. Vrijednosti za CSS varijable postavljaju se putem Sass-a, tako da je i dalje podržana prilagodba Sass-a.

  --#{$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 varijable

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

Korištenje

Inicijaliziraj zdravice putem JavaScripta:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))

Okidači

Otpuštanje se može postići dataatributom na gumbu unutar tosta kao što je prikazano u nastavku:

<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>

ili na gumbu izvan tosta koristeći data-bs-targetkako je prikazano u nastavku:

<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="Close"></button>

Mogućnosti

Kako se opcije mogu proslijediti putem atributa podataka ili JavaScripta, možete dodati naziv opcije u data-bs-, kao u data-bs-animation="{value}". Obavezno promijenite vrstu velikih i malih slova naziva opcije iz “ camelCase ” u “ kebab-case ” kada prosljeđujete opcije putem atributa podataka. Na primjer, koristite data-bs-custom-class="beautifier"umjesto data-bs-customClass="beautifier".

Od Bootstrapa 5.2.0, sve komponente podržavaju eksperimentalni atribut rezerviranih podataka data-bs-configkoji može sadržavati jednostavnu konfiguraciju komponente kao JSON niz. Kada element ima atribute data-bs-config='{"delay":0, "title":123}'i data-bs-title="456", konačna titlevrijednost će biti 456, a zasebni atributi podataka nadjačat će vrijednosti dane na data-bs-config. Osim toga, postojeći atributi podataka mogu sadržavati JSON vrijednosti poput data-bs-delay='{"show":0,"hide":150}'.

Ime Tip Zadano Opis
animation Booleov true Primijenite CSS fade prijelaz na tost.
autohide Booleov true Automatski sakrij tost nakon odgode.
delay broj 5000 Odgoda u milisekundama prije skrivanja tosta.

Metode

Asinkrone metode i prijelazi

Sve API metode su asinkrone i pokreću prijelaz . Vraćaju se pozivatelju čim prijelaz započne, ali prije nego što završi . Osim toga, poziv metode na prijelaznoj komponenti bit će zanemaren .

Pogledajte našu JavaScript dokumentaciju za više informacija .

metoda Opis
dispose Skriva tost elementa. Vaš tost ostat će na DOM-u, ali se više neće prikazivati.
getInstance Statička metoda koja vam omogućuje da dobijete tost instancu povezanu s DOM elementom.
Na primjer: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)vraća Bootstrap tost instancu.
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.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) Returns a Bootstrap toast instance.
hide Hides an element’s toast. Returns to the caller before the toast has actually been hidden (i.e. before the hidden.bs.toast event occurs). You have to manually call this method if you made autohide to false.
isShown Returns a boolean according to toast’s visibility state.
show Reveals an element’s toast. Returns to the caller before the toast has actually been shown (i.e. before the shown.bs.toast event occurs). You have to manually call this method, instead your toast won’t show.

Events

Event Description
hide.bs.toast Ovaj se događaj aktivira odmah nakon hidepozivanja metode instance.
hidden.bs.toast Ovaj događaj se pokreće kada tost više nije skriven od korisnika.
show.bs.toast Ovaj događaj aktivira se odmah kada showse pozove metoda instance.
shown.bs.toast Ovaj događaj se pokreće kada tost postane vidljiv korisniku. 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})