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.

Halo, wɔl! Dis na tost mɛsej.

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

Halo, wɔl! Dis na tost mɛsej.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
  <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:

var toastTrigger = document.getElementById('liveToastBtn')
var toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', function () {
    var 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.

Halo, wɔl! Dis na tost mɛsej.

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

Si? Jɔs lɛk dis.

Heads up, toasts go stak otomatik

<div class="toast-container">
  <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.

Halo, wɔl! Dis na tost mɛsej.

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

Halo, wɔl! Dis na tost mɛsej.

<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 .bg-primaryɛn .text-whiteto 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.

Halo, wɔl! Dis na tost mɛsej.

<div class="toast align-items-center text-white 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.

Halo, wɔl! Dis na tost mɛsej.

<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 position-absolute 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.

Si? Jɔs lɛk dis.

Heads up, toasts go stak otomatik

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `.position-absolute`, `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 position-absolute 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.

Halo, wɔl! Dis na tost mɛsej.

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

Halo, wɔl! Dis na tost mɛsej.

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

Sass we bin de

Di tin dɛn we kin chenj

$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:                1px;
$toast-border-color:                rgba($black, .1);
$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:

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return 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

Yu kin pas opshɔn dɛn bay we yu yuz data atribyut ɔ JavaSkript. Fɔ data atribyut dɛn, ad di opshɔn nem to data-bs-, lɛk insay data-bs-animation="".

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`	Oto ayd di tost
`delay`	nɔmba	`5000`	Delay fɔ ayd di tost (ms) .

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

sho

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.

toast.show()

ayd

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.

toast.hide()

fɔ trowe am

Ayd wan ɛlimɛnt in tost. Yu tost go de na di DOM bɔt i nɔ go sho igen.

toast.dispose()

getInstans fɔ di wan dɛn we de

Statik we de alaw yu fɔ gɛt di tost instans we gɛt fɔ du wit wan DOM ɛlimɛnt

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance

getƆKriɛtInstans

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 i nɔ bin initialize

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance

Di tin dɛn we kin apin

Di kayn tin we apin	Tɔk bɔt
`show.bs.toast`	Dis ivent de faya wantɛm wantɛm we dɛn kɔl di `show`instans 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.
`hide.bs.toast`	Dis ivent de faya wantɛm wantɛm we `hide`dɛ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.

var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
})