Buuka ku bigambo ebikulu Buuka ku docs navigation
Check
in English

Ebiwoomerera

Push notifications to your visitors with a toast, obubaka obw’okulabula obutazitowa era obwangu okulongoosa.

Ku muko guno

Toasts bye bimanyisibwa ebizitowa ebikoleddwa okukoppa okumanyisibwa okusindika okubadde kwettanirwa enkola z’oku ssimu ne ku mmeeza. Zizimbibwa ne flexbox, kale nnyangu okuzikwataganya n’okuziteeka mu kifo.

Okulaba okutwalira awamu

Ebintu by’olina okumanya ng’okozesa toast plugin:

  • Toasts zibeera opt-in olw’ensonga z’okukola, kale olina okuzitandika ggwe kennyini .
  • Toasts zijja kwekweka zokka singa tolambika autohide: false.
Ekikolwa kya animation eky'ekitundu kino kyesigamye ku prefers-reduced-motionkubuuza kw'emikutu. Laba ekitundu ky'ekiteeso ekikendeezeddwa mu biwandiiko byaffe eby'okutuuka ku bantu .

Eby’okulabirako

Kya bulijjo

Okukubiriza tositi ezigaziwa era eziteeberezebwa, tusaba omutwe n’omubiri. Toast headers use display: flex, okusobozesa okwanguyirwa okulaganya ebirimu okwebaza margin ne flexbox utilities zaffe.

Toasts zikyukakyuka nga bwe weetaaga era zirina markup ntono nnyo eyeetaagisa. Ekitono ennyo, twetaaga ekintu kimu okubeeramu ebirimu byo “ebyokeddwa” era tukubiriza nnyo bbaatuuni y’okugoba.

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>
Emabegako, scripts zaffe dynamically yagattako .hideekibiina okukweka ddala toast (ne display:none, okusinga just with opacity:0). Kino kati tekikyakwetaagisa. Naye, olw'okukwatagana okudda emabega, script yaffe ejja kusigala ng'ekyusakyusa ekibiina (wadde nga tewali bwetaavu bwa nkola ku kyo) okutuusa ku nkyusa enkulu eddako.

Ekyokulabirako ekiramu

Nywa ku bbaatuuni wansi okulaga tositi (eteekeddwa n’ebikozesebwa byaffe mu nsonda eya wansi ku ddyo) ebadde ekwekeddwa nga bwe kibadde.

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

Tukozesa JavaScript eno wammanga okutandikawo live toast demo yaffe:

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

    toast.show()
  })
}

Ekitangaala ekitangalijja

Tositi zitangalijja katono okutabula n’ebiri wansi wazo.

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>

Okutunga

Osobola okuteeka tositi ng’ozizinga mu kibya kya tositi, ekijja okwongerako ebanga mu vertikal.

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>

Ebirimu eby’enjawulo

Customize toasts zo nga oggyawo sub-components, tweaking them with utilities , oba nga ossaako markup yo. Wano tukoze toast ennyangu nga tuggyawo default .toast-header, nga twongerako custom hide icon okuva mu Bootstrap Icons , era nga tukozesa ebimu ku flexbox utilities okutereeza layout.

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>

Ekirala osobola n’okwongerako ebifuga n’ebitundu ebirala ku tositi.

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>

Ensengeka za langi

Nga ozimba ku kyokulabirako ekyo waggulu, osobola okukola langi za tositi ez’enjawulo n’ebikozesebwa byaffe ebya langi n’emabega . Wano twongedde ku , ate oluvannyuma ne twongera ku button yaffe ey'okuggalawo. Ku lw'empenda ennyangu, tuggyawo ensalosalo esookerwako ne ..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>

Okuteekebwa mu kifo

Teeka toasts ne custom CSS nga bw'ozeetaaga. Waggulu ku ddyo atera okukozesebwa okumanyisa, nga bwe kiri waggulu wakati. Bw’oba ​​ogenda okulaga tositi emu yokka omulundi gumu, teeka emisono gy’okuteeka mu kifo ekituufu ku .toast.

Omusipi gwa Bootstrap 11 mins eziyise
Mwasuze mutya ensi! Buno bubaka bwa toast.
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>

Ku nkola ezikola okumanyisibwa okusingawo, lowooza ku kukozesa ekintu ekizinga zisobole okwanguyirwa okutunga.

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>

Osobola n’okufuna fancy ne flexbox utilities okulaganya toasts horizontally ne/oba vertically.

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>

Okutuuka ku bantu

Tositi zigendereddwamu okuba obutaataaganya obutonotono eri abagenyi bo oba abakozesa, kale okuyamba abo abalina ebisoma ku ssirini ne tekinologiya ow’enjawulo ayamba, olina okuzinga tositi zo mu aria-livekitundu . Enkyukakyuka mu bitundu ebiramu (nga okukuba empiso/okuzza obuggya ekitundu kya tositi) zilangirirwa mu ngeri ey’otoma abasoma ku ssirini nga tekyetaagisa kutambuza kifo ky’omukozesa oba okusalako omukozesa mu ngeri endala. Okugatta ku ekyo, ssaamu aria-atomic="true"okukakasa nti tositi yonna bulijjo elangirirwa nga yuniti emu (atomu), okusinga okulangirira kyokka ekyakyusibwa (ekiyinza okuvaako obuzibu singa otereeza ekitundu kyokka ku birimu tositi, oba singa olaga ebirimu mu tositi bye bimu mu kiseera ekiddako). Singa amawulire ageetaagisa gaba makulu eri enkola, okugeza ku lukalala lw’ensobi mu ffoomu, olwo kozesa ekitundu eky’okulabulamu kifo kya tositi.

Weetegereze nti ekitundu ekiramu kyetaaga okubaawo mu markup nga toast tennakolebwa oba okulongoosebwa. Singa okola dynamically byombi mu kiseera kye kimu n’obiyingiza mu lupapula, okutwalira awamu tebijja kulangirirwa tekinologiya ayamba.

Era olina okukyusakyusa rolene aria-livelevel okusinziira ku birimu. Bwe kiba nga bubaka bukulu nga ensobi, kozesa role="alert" aria-live="assertive", bwe kitaba ekyo kozesa role="status" aria-live="polite"attributes.

Nga ebirimu by’olaga bikyuka, kakasa nti ozza obuggya delayekiseera ekiweddemu abakozesa basobole okufuna obudde obumala okusoma tositi.

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

Bw’oba ​​okozesa autohide: false, olina okugattako akabonero akaggalawo okusobozesa abakozesa okugoba tositi.

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>

Wadde nga mu by’ekikugu kisoboka okwongerako ebifuga ebiyinza okussa essira/ebikolebwa (nga obutambi oba enkolagana endala) mu tositi yo, olina okwewala okukola kino ku tositi ezikweka. Ne bw’owa tositi ekiseera ekiwanvu delay, abakozesa kiiboodi ne tekinologiya ayamba bayinza okusanga obuzibu okutuuka ku tositi mu budde okukola (okuva tositi bwe zitafuna focus nga ziragiddwa). Bw’oba ​​ddala olina okuba n’ebifuga ebirala, tusaba okukozesa tositi ng’erina autohide: false.

CSS

Enkyukakyuka ezikyukakyuka

Yayongerwako mu v5.2.0

Nga ekitundu ku nkola ya Bootstrap egenda ekulaakulana enkyukakyuka za CSS, toasts kati zikozesa enkyukakyuka za CSS ez’omu kitundu ku .toastfor enhanced real-time customization. Emiwendo gy'enkyukakyuka za CSS giteekebwawo nga giyita mu Sass, kale okulongoosa Sass kukyawagirwa, nakyo.

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

Enkyukakyuka za 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);

Enkozesa

Tandika tositi ng'oyita mu JavaScript:

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

Ebivaako amaanyi

Okugobwa kuyinza okutuukirira n’ekintu ekiri dataku bbaatuuni munda mu tositi nga bwe kiragibwa wansi:

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

oba ku bbaatuuni ebweru wa tositi ng’okozesa data-bs-targetnga bwe kiragibwa wansi:

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

Eby’okulondako

Nga eby'okulonda bwe bisobola okuyisibwa nga biyita mu bikwata ku data oba JavaScript, osobola okugattako erinnya ly'okulonda ku data-bs-, nga mu data-bs-animation="{value}". Kakasa nti okyusa ekika kya case eky’erinnya ly’okulonda okuva ku “ camelCase ” okudda ku “ kebab-case ” ng’oyisa eby’okulonda ng’oyita mu data attributes. Okugeza, kozesa data-bs-custom-class="beautifier"mu kifo kya data-bs-customClass="beautifier".

Okuva ku Bootstrap 5.2.0, ebitundu byonna biwagira ekintu kya data ekiterekeddwa eky'okugezesadata-bs-config ekiyinza okuteeka ensengeka y'ebitundu ennyangu ng'olunyiriri lwa JSON. Ekintu bwe kiba data-bs-config='{"delay":0, "title":123}'n'ebintu data-bs-title="456", omuwendo ogusembayo titlegujja kuba 456era ebifaananyi bya data eby'enjawulo bijja kusazaamu emiwendo egyaweebwa ku data-bs-config. Okugatta ku ekyo, ebikwata ku data ebiriwo bisobola okuteeka emiwendo gya JSON nga data-bs-delay='{"show":0,"hide":150}'.

Erinnya Okuwandiika Okukosamu Okunnyonnyola
animation boolean true Siiga enkyukakyuka ya CSS fade ku toast.
autohide boolean true Okweka tositi mu ngeri ey’otoma oluvannyuma lw’okulwawo.
delay omuwendo 5000 Lwawo mu milisekondi nga tonnakweka tositi.

Enkola

Enkola ezitakwatagana n’enkyukakyuka

Enkola zonna eza API tezikwatagana era zitandika enkyukakyuka . Zidda eri oyo akubye amangu ddala ng'enkyukakyuka etandise naye nga tennaggwaako . Okugatta ku ekyo, okuyita enkola ku kitundu ekikyukakyuka kujja kubuusibwa amaaso .

Laba ebiwandiiko byaffe ebya JavaScript okumanya ebisingawo .

Engeri Okunnyonnyola
dispose Akweka tositi ya elementi. Toast yo ejja kusigala ku DOM naye tegenda kuddamu kulaga.
getInstance Enkola ya static ekusobozesa okufuna toast instance ekwatagana ne DOM element.
Okugeza: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)Ezzaayo ekifaananyi kya Bootstrap toast.
getOrCreateInstance Enkola ya static ekusobozesa okufuna toast instance ekwatagana ne DOM element, oba okukola empya, mu mbeera nga teyali etandikibwawo.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)Ezzaayo ekifaananyi kya Bootstrap toast.
hide Akweka tositi ya elementi. Edda eri oyo akubira nga tositi tennakwekebwa ddala (kwe kugamba hidden.bs.toastng’ekintu tekinnabaawo). Olina okuyita enkola eno mu ngalo singa wakola autohideku false.
isShown Ezzaayo boolean okusinziira ku mbeera y'okulabika kwa toast.
show Abikkula tositi ya elementi. Edda eri oyo akubira nga tositi tennalagibwa ddala (kwe kugamba nga shown.bs.toastekintu tekinnabaawo). Olina okuyita enkola eno mu ngalo, mu kifo ky’ekyo tositi yo tejja kulaga.

Ebibaddewo

Omukolo Okunnyonnyola
hide.bs.toast Ekintu kino kikubwa amangu ddala nga hideenkola ya instance eyitiddwa.
hidden.bs.toast Omukolo guno gukubwa nga tositi emaze okukwekebwa eri oyo agikozesa.
show.bs.toast Ekintu kino kikuba amangu ddala nga showenkola ya instance eyitiddwa.
shown.bs.toast Omukolo guno gukubwa nga tositi emaze okulabika eri oyo agikozesa. 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})