Skip to di men tin dɛn we de insay Skip to doks nevigishɔn
Check
in English

Tost dɛn we dɛn kin mek

Push notis to yu visitɔ dɛn wit tost, wan layt ɛn izi fɔ kɔstɔmayz alɛt mɛsej.

Na dis pej

Tost na layt notis dɛn we dɛn mek fɔ falamakata di push notis dɛn we mobayl ɛn dɛsktɔp ɔpreshɔn sistem dɛn dɔn mek pipul dɛn lɛk. Dɛn bil dɛn wit fleksbɔks, so dɛn izi fɔ alaynɛd ​​ɛn pozishɔn.

Ɔvaviu fɔ di Baybul

Tin dɛn fɔ no we yu de yuz di tost plɔgin:

  • Tost na opt-in fɔ pefɔmɛns rizin, so yu fɔ initialize am yusɛf .
  • Tost dɛn go ayd ɔtomɛtik wan if yu nɔ spɛsifa autohide: false.
Di animashɔn ifɛkt fɔ dis kɔmpɔnɛnt de dipen pan di prefers-reduced-motionmidia kwɛstyɔn. Si di ridyus muvmɛnt sɛkshɔn na wi aksesibiliti dɔkyumentri .

Ɛgzampul dɛn

Men

Fɔ ɛnkɔrej tost dɛn we pɔsin kin ɛkstɛnd ɛn we pɔsin kin ebul fɔ tɔk bɔt, wi kin advays fɔ yuz ɛd ɛn bɔdi. Tost headers use display: flex, alaw izi alaynɛshɔn fɔ kɔntinyu tank to wi margin ɛn flexbox yutiliti dɛn.

Tost dɛn kin fleksibul lɛk aw yu nid ɛn dɛn gɛt smɔl mak we dɛn nid. If nɔto so, wi nid wan ɛlimɛnt fɔ gɛt yu “tost” kɔntinyu ɛn wi rili ɛnkɔrej fɔ dismis bɔtin.

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>
Bifo dis tɛm, wi skript dɛn bin de ad di .hideklas dinamik wan fɔ ayd wan tost kɔmplit wan (wit display:none, pas jɔs wit opacity:0). Dis nɔ nid fɔ apin naw igen. Bɔt fɔ bakwɔd kɔmpitibliti, wi skript go kɔntinyu fɔ tɔgl di klas (ivin if no prɛktikal nid nɔ de fɔ am) te di nɛks big vɛshɔn.

Layf ɛgzampul

Klik di bɔtin we de dɔŋ fɔ sho wan tost (we dɛn put wi yutiliti dɛn na di rayt kɔna we de dɔŋ) we dɛn dɔn ayd bay difɔlt.

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

Wi de yuz di JavaSkript we de dɔŋ fɔ trig wi layv tost dɛmo:

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

    toast.show()
  })
}

Translucent we de shayn

Tost dɛn kin translucent smɔl fɔ blend in wit wetin de dɔŋ dɛn.

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>

Stak we dɛn de stak

Yu kin stak tost dɛn bay we yu rap dɛn insay tost kɔntena, we go ad sɔm spays vertikal wan.

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>

Kɔstɔm kɔntinyu

Kastamayz yu tost dɛn bay we yu pul di sɔb-kɔmpɔnɛnt dɛn, tweak dɛn wit yutiliti dɛn , ɔ bay we yu ad yu yon mak. Na ya wi dɔn mek wan simpul tost bay we wi pul di difɔlt .toast-header, ad wan kɔstɔm ayd aykɔn frɔm Bootstrap Aykɔn dɛn , ɛn yuz sɔm fleksbɔks yutiliti dɛn fɔ ajɔst di 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>

Ɔda we de fɔ du dat, yu kin ad ɔda kɔntrol ɛn kɔmpɔnɛnt dɛn bak to tost dɛn.

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>

Kɔlɔ skim dɛn

We yu bil pan di ɛgzampul we de ɔp, yu kin mek difrɛn tost kɔlɔ skim dɛn wit wi kɔlɔ ɛn bakgrɔn yutiliti dɛn. Na ya wi dɔn ad .text-bg-primaryto di .toast, ɛn afta dat wi ad .btn-close-whiteto wi klos bɔtin. Fɔ mek yu gɛt krisp ɛj, wi kin pul di difɔlt bɔda wit .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>

Di ples we dɛn fɔ put am

Put tost wit kɔstɔm CSS as yu nid dɛn. Bɔku tɛm, dɛn kin yuz di ɔp rayt say fɔ notis, ɛn na di ɔp pat na di midul. If yu go jɔs ɛva sho wan tost wan tɛm, put di pozishɔn stayl dɛn rayt na di .toast.

Bootstrap fɔ yuz 11 mins dɔn pas
Halo, wɔl! Dis na tost mɛsej.
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>

Fɔ sistem dɛn we de jenarayz mɔ notis, tink bɔt fɔ yuz wan wrap ɛlimɛnt so dat dɛn go ebul fɔ stak izi wan.

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>

Yu kin gɛt fansi bak wit fleksbɔks yutiliti fɔ alaynɛd ​​tost dɛn ɔrizɔntal ɛn/ɔ vertikal wan.

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>

Di we aw pɔsin kin ebul fɔ go de

Dɛn mek tost fɔ bi smɔl smɔl tin dɛn we go ambɔg di wan dɛn we de kam fɛn yu ɔ di wan dɛn we de yuz am, so fɔ ɛp di wan dɛn we gɛt skrin rida ɛn di sem kayn tin dɛn we de ɛp yu, yu fɔ rap yu tost dɛn na wan aria-liverijyɔn . Chenj dɛn to layv rijyɔn dɛn (lɛk fɔ injɛkt/ɔpdet wan tost kɔmpɔnɛnt) na di wan dɛn we de rid di skrin kin anɔys ɔtomɛtik wan ɛn dɛn nɔ nid fɔ muv di pɔsin in fɔs ɔ ɔda we fɔ ambɔg di pɔsin we de yuz am. Apat frɔm dat, put aria-atomic="true"fɔ mek shɔ se dɛn kin ɔltɛm anɔys di wan ol tost as wan (atomik) yunit, pas fɔ jɔs anɔys wetin dɛn chenj (we kin mek yu gɛt prɔblɛm if yu jɔs ɔpdet pat pan di tin dɛn we de insay di tost, ɔ if yu de sho di sem tin we de insay di tost na leta tɛm). If di infɔmeshɔn we dɛn nid impɔtant fɔ di prɔses, ɛgz., fɔ wan list fɔ mistek dɛn na wan fɔm, den yuz di alɛt kɔmpɔnɛntinsted fɔ mek dɛn yuz tost.

Notis se di layv rijyɔn nid fɔ de na di mak bifo dɛn mek ɔ ɔpdet di tost. If yu dinamik wan jenarayz ɔl tu di sem tɛm ɛn injɛkt dɛn insay di pej, dɛn nɔ go jɔs de anɔys bay ɛp tɛknɔlɔji dɛn.

Yu nid bak fɔ adap di roleɛn aria-livelɛvɛl dipen pan di tin dɛn we de insay. If na impɔtant mɛsej lɛk mistek, yuz role="alert" aria-live="assertive", ɔdasay yuz role="status" aria-live="polite"atribyut dɛn.

As di tin dɛn we yu de sho de chenj, mek shɔ se yu ɔpdet di delaytɛm we dɔn pas so dat di wan dɛn we de yuz am go gɛt inof tɛm fɔ rid di tost.

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

We yu de yuz autohide: false, yu fɔ ad wan klos bɔtin fɔ alaw di wan dɛn we de yuz am fɔ dismis di 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>

Pan ɔl we tɛknikal wan i pɔsibul fɔ ad kɔntrol dɛn we yu kin pe atɛnshɔn/akshɔn (lɛk ɔda bɔtin ɔ link dɛn) na yu tost, yu fɔ avɔyd fɔ du dis fɔ ɔtohayd tost dɛn. Ivin if yu gi di tost fɔ lɔng delaytɛm , di wan dɛn we de yuz di kibɔd ɛn ɛp tɛknɔlɔji kin si se i nɔ izi fɔ rich di tost insay di tɛm fɔ tek akshɔn (bikɔs di tost dɛn nɔ kin gɛt fɔs we dɛn sho dɛn). If yu rili fɔ gɛt ɔda kɔntrol dɛn, wi kin advays yu fɔ yuz tost wit autohide: false.

CSS we dɛn kɔl CSS

Di tin dɛn we kin chenj

Dɛn ad am na v5.2.0

As pat pan Bootstrap in evolvin CSS vɛriɔbul dɛn aprɔch, tost dɛn naw de yuz lokal CSS vɛriɔbul dɛn pan .toastfɔ ɛnhans rial-taym kɔstɔmayshɔn. Valyu fɔ di CSS vɛriɔbul dɛn de sɛt via Sass, so Sass kɔstɔmayshɔn stil de sɔpɔt, bak.

  --#{$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 di vayriɔbul dɛn

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

Aw fɔ yuz am

Initialize tost dɛn bay JavaSkript:

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

Di tin dɛn we de mek pɔsin want fɔ du sɔntin

Yu kin ebul fɔ dismis wit di dataatribyut we de na wan bɔtin insay di tost lɛk aw dɛn sho dɔŋ ya:

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

ɔ pan wan bɔtin we de na do na di tost yuz di data-bs-targetlɛk aw dɛn sho dɔŋ ya:

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

Di tin dɛn we yu kin pik fɔ du

As opshɔn dɛn kin pas bay data atribyut ɔ JavaSkript, yu kin ad opshɔn nem to data-bs-, lɛk insay data-bs-animation="{value}". Mek shɔ se yu chenj di kes tayp fɔ di opshɔn nem frɔm “ camelCase ” to “ kebab-case ” we yu de pas di opshɔn dɛn tru data atribyut dɛn. Fɔ ɛgzampul, yuz data-bs-custom-class="beautifier"insted fɔ data-bs-customClass="beautifier".

As fɔ Bootstrap 5.2.0, ɔl di kɔmpɔnɛnt dɛn de sɔpɔt wan ɛkspirimɛnt rizɔv data atribyut data-bs-configwe kin os simpul kɔmpɔnɛnt kɔnfigyushɔn as JSON string. We wan ɛlimɛnt gɛt data-bs-config='{"delay":0, "title":123}'ɛn data-bs-title="456"atribyut, di fayn titlevalyu go bi 456ɛn di sɛpret data atribyut dɛn go ɔvalayz valyu dɛn we dɛn gi pan data-bs-config. Apat frɔm dat, di data atribyut dɛn we de naw ebul fɔ gɛt JSON valyu dɛn lɛk data-bs-delay='{"show":0,"hide":150}'.

Nem Kayn Balans Tɔk bɔt
animation boolean we dɛn kɔl true Aplay wan CSS fade transishɔn to di tost.
autohide boolean we dɛn kɔl true Ayd di tost ɔtomɛtik afta di delay.
delay nɔmba 5000 Delay in milisekɔnd bifo yu ayd di tost.

Di we aw dɛn de du am

Asynchronous mεtכd dεm εn transishכn dεm

Ɔl di API mɛtɔd dɛn na asynchronous ɛn dɛn kin stat wan transishɔn . Dɛn kin go bak to di pɔsin we kɔl am jɔs lɛk aw dɛn bigin fɔ chenj bɔt bifo i dɔn . Apat frɔm dat, dɛn go ignore wan mɛtɔd kɔl pan wan transishɔn kɔmpɔnɛnt .

Si wi JavaSkript dɔkyumentri fɔ no mɔ .

We Tɔk bɔt
dispose Ayd wan ɛlimɛnt in tost. Yu tost go de na di DOM bɔt i nɔ go sho igen.
getInstance Statik we de alaw yu fɔ gɛt di tost instans we gɛt fɔ du wit wan DOM ɛlimɛnt.
Fɔ ɛgzampul: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)Ritɔn wan Bootstrap tost instans.
getOrCreateInstance Statik we de alaw yu fɔ gɛt di tost instans we gɛt fɔ du wit wan DOM ɛlimɛnt, ɔ mek wan nyu wan, insay kes we dɛn nɔ bin initialize am.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)Ritɔn wan Bootstrap tost instans.
hide Ayd wan ɛlimɛnt in tost. I de go bak to di pɔsin we kɔl bifo dɛn rili ayd di tost (dat na bifo di hidden.bs.toasttin apin). Yu fɔ kɔl dis we wit yu an if yu mek autohidefɔ false.
isShown Ritɔn wan bɔlin akɔdin to di tost in visibiliti stet.
show Rivɛl wan ɛlimɛnt in tost. Ritɔn to di pɔsin we kɔl bifo dɛn rili sho di tost (dat na bifo di shown.bs.toasttin apin). Yu get fo manually kol dis method, insted yu toast no go sho.

Di tin dɛn we kin apin

Program Tɔk bɔt
hide.bs.toast Dis ivent de faya wantɛm wantɛm we hidedɛn dɔn kɔl di instans mɛtɔd.
hidden.bs.toast Dis ivent de faya we di tost dɔn dɔn fɔ ayd frɔm di pɔsin we de yuz am.
show.bs.toast Dis ivent de faya wantɛm wantɛm we dɛn kɔl di showinstans mɛtɔd.
shown.bs.toast Dɛn kin faya dis ivin we dɛn dɔn mek di pɔsin we de yuz am si di tost. 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})