Ale nan kontni prensipal la Ale nan navigasyon dokiman yo
Check
in English

Toasts

Pouse notifikasyon bay vizitè ou yo ak yon pen griye, yon mesaj alèt ki lejè ak fasil personnalisable.

Nan paj sa a

Toasts yo se notifikasyon ki lejè ki fèt pou imite notifikasyon pouse ki te popilarize pa sistèm operasyon mobil ak Desktop. Yo bati ak flexbox, kidonk yo fasil pou aliman ak pozisyon.

Apèsi sou lekòl la

Bagay ou dwe konnen lè w ap itilize plugin pen griye:

  • Toasts yo patisipe pou rezon pèfòmans, kidonk ou dwe inisyalize yo tèt ou .
  • Toasts ap kache otomatikman si ou pa presize autohide: false.
Efè animasyon eleman sa a depann de prefers-reduced-motionrechèch medya yo. Gade seksyon mouvman redui nan dokiman aksè nou an .

Egzanp yo

Debaz

Pou ankouraje pen griye extensible ak previzib, nou rekòmande yon header ak kò. Tèt pen griye itilize display: flex, sa ki pèmèt aliyman fasil nan kontni gras a maj nou yo ak sèvis piblik flexbox.

Toasts yo fleksib jan ou bezwen epi yo gen yon ti kras maketing obligatwa. Omwen, nou mande pou yon sèl eleman ki genyen kontni "griye" ou epi ankouraje fòtman yon bouton anile.

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>
Précédemment, scripts nou yo te ajoute dinamikman .hideklas la pou kache nèt yon pen griye (ak display:none, olye ke jis ak opacity:0). Sa a se kounye a pa nesesè ankò. Sepandan, pou konpatibilite bak, script nou an ap kontinye aktive klas la (menm si pa gen okenn bezwen pratik pou li) jouk pwochen vèsyon pi gwo a.

Egzanp viv

Klike sou bouton ki anba a pou montre yon pen griye (ki pozisyone ak sèvis piblik nou yo nan kwen ki pi ba dwat) ki te kache pa default.

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

Nou itilize JavaScript sa a pou deklanche demo pen griye nou an:

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

    toast.show()
  })
}

Translusid

Toasts yo yon ti kras translusid melanje nan ak sa ki anba yo.

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>

Anpile

Ou ka pile pen griye pa vlope yo nan yon veso pen griye, ki pral vètikal ajoute kèk espas.

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>

Kontni Custom

Pèsonalize pen griye ou lè w retire sub-konpozan, ajiste yo ak sèvis piblik , oswa lè w ajoute pwòp mak ou. Isit la nou te kreye yon pen griye ki pi senp lè nou retire default la .toast-header, ajoute yon ikòn kache koutim nan Bootstrap Icons , epi itilize kèk sèvis piblik flexbox pou ajiste layout la.

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>

Altènativman, ou kapab tou ajoute kontwòl adisyonèl ak konpozan nan toasts.

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>

Koulè rapid

Bati sou egzanp ki anwo a, ou ka kreye diferan koulè pen griye ak sèvis piblik koulè ak background nou yo . Isit la nou te ajoute .text-bg-primarynan .toast, ak Lè sa a, ajoute .btn-close-whitenan bouton fèmen nou an. Pou yon kwen klè, nou retire fwontyè default la ak .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

Mete pen griye ak CSS koutim jan ou bezwen yo. Anwo dwat la souvan itilize pou notifikasyon, menm jan ak mitan an tèt. Si w ap montre sèlman yon pen griye nan yon moman, mete estil pozisyon yo dwat sou .toast.

Bootstrap 11 minit de sa
Bonjou, mond! Sa a se yon mesaj pen griye.
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>

Pou sistèm ki jenere plis notifikasyon, konsidere itilize yon eleman anbalaj pou yo ka fasilman pile.

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>

Ou ka jwenn anpenpan tou ak sèvis piblik flexbox pou fè aliman pen griye orizontal ak / oswa vètikal.

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>

Aksesiblite

Toasts yo gen entansyon fè ti entèripsyon pou vizitè ou oswa itilizatè yo, kidonk pou ede moun ki gen lektè ekran ak teknoloji asistans ki sanble, ou ta dwe vlope pen griye ou nan yon aria-liverejyon . Chanjman nan rejyon viv (tankou enjekte / ajou yon eleman pen griye) otomatikman anonse pa lektè ekran san yo pa bezwen deplase konsantre itilizatè a oswa otreman entèwonp itilizatè a. Anplis de sa, enkli aria-atomic="true"asire ke tout pen griye a toujou anonse kòm yon sèl inite (atomik), olye ke jis anonse sa ki te chanje (ki ta ka mennen nan pwoblèm si ou sèlman mete ajou yon pati nan kontni pen griye a, oswa si montre menm kontni pen griye a. nan yon moman pita nan tan). Si enfòmasyon ki nesesè yo enpòtan pou pwosesis la, pa egzanp pou yon lis erè nan yon fòm, Lè sa a, sèvi ak eleman alèt la .olye pou yo pen griye.

Remake byen ke rejyon an ap viv la bezwen prezan nan maketing la anvan pen griye a te pwodwi oswa mete ajou. Si ou dinamik jenere tou de an menm tan epi enjekte yo nan paj la, jeneralman yo pa pral anonse pa teknoloji asistans.

Ou bezwen tou adapte a roleak aria-livenivo depann sou kontni an. Si se yon mesaj enpòtan tankou yon erè, sèvi ak role="alert" aria-live="assertive", otreman sèvi ak role="status" aria-live="polite"atribi.

Kòm kontni w ap montre a chanje, asire w ke ou mete ajou tan an delaypou itilizatè yo gen ase tan pou li pen griye a.

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

Lè w ap itilize autohide: false, ou dwe ajoute yon bouton fèmen pou pèmèt itilizatè yo ranvwaye pen griye a.

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>

Pandan ke teknikman li posib pou ajoute kontwòl konsantre/aksyone (tankou bouton adisyonèl oswa lyen) nan pen griye ou a, ou ta dwe evite fè sa pou otokache pen griye. Menm si ou bay pen griye a yon tan long delay, itilizatè klavye ak teknoloji asistans yo ka jwenn li difisil pou rive nan pen griye a alè pou yo pran aksyon (piske pen griye pa resevwa konsantre lè yo parèt). Si w absoliman dwe gen plis kontwòl, nou rekòmande pou w sèvi ak yon pen griye ak autohide: false.

CSS

Varyab

Te ajoute nan v5.2.0

Kòm yon pati nan apwòch varyab CSS en Bootstrap la, toasts kounye a itilize varyab CSS lokal yo .toastpou amelyore personnalisation an tan reyèl. Valè pou varyab CSS yo mete atravè Sass, kidonk personnalisation Sass toujou sipòte tou.

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

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

Itilizasyon

Inisyalize toasts via JavaScript:

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

Deklanche

Yo ka fè ranvwa a ak dataatribi ki sou yon bouton nan pen griye a jan yo montre pi ba a:

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

oswa sou yon bouton deyò pen griye a lè l sèvi avèk data-bs-targetjan yo montre anba a:

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

Opsyon

Kòm opsyon yo ka pase atravè atribi done oswa JavaScript, ou ka ajoute yon non opsyon nan data-bs-, tankou nan data-bs-animation="{value}". Asire w ke w chanje kalite ka non opsyon an soti nan " camelCase " a " kebab-case " lè w ap pase opsyon yo atravè atribi done yo. Pa egzanp, sèvi ak data-bs-custom-class="beautifier"olye de data-bs-customClass="beautifier".

Apati Bootstrap 5.2.0, tout konpozan sipòte yon eksperimantal atribi done rezève data-bs-configki ka loje konfigirasyon eleman senp kòm yon kòd JSON. Lè yon eleman gen data-bs-config='{"delay":0, "title":123}'ak data-bs-title="456"atribi, titlevalè final la pral 456ak atribi done separe yo pral pase sou valè yo bay sou data-bs-config. Anplis de sa, atribi done ki egziste deja yo kapab loje valè JSON tankou data-bs-delay='{"show":0,"hide":150}'.

Non Kalite Default Deskripsyon
animation booleyen true Aplike yon tranzisyon CSS fennen sou pen griye a.
autohide booleyen true Otomatikman kache pen griye a apre reta a.
delay nimewo 5000 Reta nan milisgond anvan ou kache pen griye a.

Metòd

Metòd asynchrone ak tranzisyon

Tout metòd API yo asenkron epi yo kòmanse yon tranzisyon . Yo retounen kote moun k ap rele a le pli vit ke tranzisyon an kòmanse men anvan li fini . Anplis de sa, yo pral inyore yon apèl metòd sou yon eleman tranzisyon .

Gade dokiman JavaScript nou an pou plis enfòmasyon .

Metòd Deskripsyon
dispose Kache pen griye yon eleman. Pen grye ou a ap rete sou DOM la men li p ap parèt ankò.
getInstance Metòd estatik ki pèmèt ou jwenn egzanp pen griye ki asosye ak yon eleman DOM.
Pou egzanp: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)Retounen yon egzanp Bootstrap pen griye.
getOrCreateInstance Metòd estatik ki pèmèt ou jwenn egzanp pen griye ki asosye ak yon eleman DOM, oswa kreye yon nouvo, nan ka li pa te inisyalize.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)Retounen yon egzanp Bootstrap pen griye.
hide Kache pen griye yon eleman. Retounen bay moun kap rele a anvan pen griye a te kache (sa vle di anvan hidden.bs.toastevènman an rive). Ou dwe manyèlman rele metòd sa a si ou te fè autohidenan false.
isShown Retounen yon boolean selon eta vizibilite toast la.
show Revele pen griye yon eleman. Retounen bay moun k ap rele a anvan yo te montre pen griye a (sa vle di anvan shown.bs.toastevènman an rive). Ou gen manyèlman rele metòd sa a, olye pen griye ou a pa pral montre.

Evènman

Evènman Deskripsyon
hide.bs.toast Evènman sa a te tire imedyatman lè yo hidete rele metòd egzanp lan.
hidden.bs.toast Evènman sa a revoke lè pen griye a fini kache pou itilizatè a.
show.bs.toast Evènman sa a dife imedyatman lè yo showrele metòd egzanp lan.
shown.bs.toast Evènman sa a revoke lè pen griye a te vin vizib pou itilizatè a. 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})