in English

Toasts

Thawb cov ntawv ceeb toom rau koj cov neeg tuaj saib nrog toast, lub teeb yuag thiab yooj yim customizable ceeb toom cov lus.

Ntawm nplooj ntawv no

Toasts yog cov ntawv ceeb toom teeb pom kev zoo tsim los ua cov ntawv ceeb toom thawb uas tau nrov los ntawm cov xov tooj ntawm tes thiab desktop operating systems. Lawv tau tsim nrog flexbox, yog li lawv yooj yim rau kev sib dhos thiab txoj haujlwm.

Txheej txheem cej luam

Tej yam uas yuav tsum paub thaum siv lub toast plugin:

Toasts yog opt-in rau kev ua tau zoo vim li cas, yog li koj yuav tsum pib lawv tus kheej .
Toasts yuav cia li nkaum yog tias koj tsis qhia autohide: false.

Cov nyhuv animation ntawm cov khoom siv no yog nyob ntawm cov prefers-reduced-motionlus nug xov xwm. Saib qhov txo qis ntawm peb cov ntaub ntawv nkag mus tau .

Piv txwv

Basic

Txhawm rau txhawb nqa cov toasts uas tau nthuav dav thiab kwv yees tau, peb pom zoo kom lub taub hau thiab lub cev. Toast headers siv display: flex, tso cai yooj yim sib dhos ntawm cov ntsiab lus ua tsaug rau peb cov paj thiab cov khoom siv flexbox.

Toasts yog hloov tau raws li koj xav tau thiab muaj tsawg heev xav tau markup. Qhov tsawg kawg nkaus, peb xav tau ib lub ntsiab lus kom muaj koj cov ntsiab lus "toasted" thiab txhawb kom lub pob tso tawm.

Nyob zoo, ntiaj teb! Qhov no yog ib qho lus toast.

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>

Yav dhau los, peb cov ntawv dynamically ntxiv cov .hidechav kawm kom zais ib qho toast (nrog display:none, tsis yog nrog opacity:0). Qhov no tam sim no tsis tsim nyog lawm. Txawm li cas los xij, rau kev rov qab sib raug zoo, peb tsab ntawv yuav txuas ntxiv mus rau hauv chav kawm (txawm tias tsis muaj qhov xav tau rau nws) mus txog rau qhov loj tom ntej.

Nyob ua piv txwv

Nias lub pob hauv qab no los qhia ib qho toast (chaw nrog peb cov khoom siv hluav taws xob hauv qab sab xis) uas tau muab zais los ntawm lub neej ntawd.

Hello, world! This is a toast message.

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

Peb siv JavaScript hauv qab no los ua rau peb lub neej toast demo:

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

    toast.show()
  })
}

Translucent

Toasts yog me ntsis translucent kom sib xyaw nrog dab tsi hauv qab lawv.

Nyob zoo, ntiaj teb! Qhov no yog ib qho lus toast.

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>

stacking

Koj tuaj yeem ntim cov toasts los ntawm qhwv lawv rau hauv lub thawv toast, uas yuav vertically ntxiv qee qhov sib nrug.

Saib? Ib yam li no.

Tau taub hau, toasts yuav stack tau

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>

Kev cai cov ntsiab lus

Customize koj toasts los ntawm kev tshem tawm cov khoom sib txuas, tweaking nrog cov khoom siv hluav taws xob , lossis los ntawm kev ntxiv koj tus kheej cov cim. Ntawm no peb tau tsim ib qho yooj yim toast los ntawm kev tshem tawm lub neej ntawd .toast-header, ntxiv ib qho kev cai zais icon los ntawm Bootstrap Icons , thiab siv qee cov khoom siv flexbox los kho qhov layout.

Nyob zoo, ntiaj teb! Qhov no yog ib qho lus toast.

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>

Xwb, koj tuaj yeem ntxiv cov kev tswj thiab cov khoom ntxiv rau toasts.

Nyob zoo, ntiaj teb! Qhov no yog ib qho lus toast.

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>

Xim schemes

Ua raws li qhov piv txwv saum toj no, koj tuaj yeem tsim cov xim toast sib txawv nrog peb cov xim thiab cov khoom siv tom qab . Ntawm no peb tau ntxiv .text-bg-primaryrau qhov .toast, thiab tom qab ntawd ntxiv .btn-close-whiterau peb lub khawm kaw. Rau ib tug crisp ntug, peb tshem tawm lub neej ntawd ciam teb nrog .border-0.

Nyob zoo, ntiaj teb! Qhov no yog ib qho lus toast.

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>

Qhov chaw

Muab cov toasts nrog kev cai CSS raws li koj xav tau. Sab saum toj txoj cai feem ntau yog siv rau kev ceeb toom, ib yam li sab saum toj nruab nrab. Yog tias koj tsuas yog yuav tsum tau qhia ib qho toast ib zaug, muab cov qauv tso cai rau ntawm .toast.

Nyob zoo, ntiaj teb! Qhov no yog ib qho lus 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>

Rau cov tshuab uas tsim cov ntawv ceeb toom ntxiv, xav txog kev siv cov khoom qhwv kom lawv tuaj yeem yooj yim pawg.

Saib? Ib yam li no.

Tau taub hau, toasts yuav stack tau

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>

Koj tuaj yeem tau txais kev zoo nkauj nrog cov khoom siv flexbox los ua kom cov toasts horizontally thiab / lossis vertically.

Nyob zoo, ntiaj teb! Qhov no yog ib qho lus toast.

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>

Kev siv tau

Toasts yog npaj los cuam tshuam me me rau koj cov neeg tuaj saib lossis cov neeg siv, yog li txhawm rau pab cov neeg uas muaj cov ntawv nyeem thiab cov thev naus laus zis zoo sib xws, koj yuav tsum qhwv koj cov toasts hauv ib aria-livecheeb tsam . Kev hloov pauv rau thaj chaw nyob (xws li txhaj tshuaj / hloov kho cov khoom noj toast) tau tshaj tawm los ntawm cov neeg siv tshuaj ntsuam yam tsis tas yuav txav tus neeg siv lub hom phiaj lossis cuam tshuam rau tus neeg siv. Tsis tas li ntawd, suav nrog aria-atomic="true"kom paub meej tias tag nrho cov toast yog ib txwm tshaj tawm raws li ib qho (atomic) unit, es tsis yog tshaj tawm qhov hloov pauv (uas tuaj yeem ua rau muaj teeb meem yog tias koj tsuas yog hloov kho ib feem ntawm cov toast cov ntsiab lus, lossis yog tias tso saib tib lub ntsiab lus toast. tom qab lub sijhawm). Yog tias cov ntaub ntawv xav tau yog qhov tseem ceeb rau cov txheej txheem, piv txwv li rau ib daim ntawv teev cov kev ua yuam kev hauv ib daim ntawv, ces siv cov lus ceeb toom .tsis yog toast.

Nco ntsoov tias thaj av nyob yuav tsum muaj nyob rau hauv cov cim ua ntej lub toast yog tsim los yog hloov tshiab. Yog tias koj dynamically tsim ob qho tib si tib lub sijhawm thiab txhaj rau hauv nplooj ntawv, lawv feem ntau yuav tsis raug tshaj tawm los ntawm cov cuab yeej pabcuam.

Koj kuj yuav tsum tau hloov kho rolethiab aria-liveqib nyob ntawm cov ntsiab lus. Yog tias nws yog cov lus tseem ceeb xws li kev ua yuam kev, siv role="alert" aria-live="assertive", txwv tsis pub siv cov role="status" aria-live="polite"cwj pwm.

Raws li cov ntsiab lus koj tab tom nthuav tawm cov kev hloov pauv, nco ntsoov hloov kho lub delaysijhawm kom cov neeg siv sijhawm txaus los nyeem cov toast.

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

Thaum siv autohide: false, koj yuav tsum ntxiv khawm kaw kom tso cai rau cov neeg siv tshem tawm cov toast.

Nyob zoo, ntiaj teb! Qhov no yog ib qho lus toast.

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>

Thaum technically nws muaj peev xwm ntxiv kev tsom xam / kev tswj tau (xws li cov nyees khawm ntxiv lossis txuas) hauv koj lub ci ci, koj yuav tsum tsis txhob ua qhov no rau autohiding toasts. Txawm hais tias koj muab lub khob cij rau lub sijhawm ntev delay, cov keyboard thiab cov neeg siv thev naus laus zis tuaj yeem pom tias nws nyuaj rau kev ncav cuag lub ci ci hauv lub sijhawm ua haujlwm (vim cov toasts tsis tau txais kev tsom mus rau thaum lawv pom). Yog tias koj yuav tsum muaj kev tswj xyuas ntxiv, peb pom zoo kom siv lub toast nrog autohide: false.

CSS

Hloov pauv

Ntxiv hauv v5.2.0

Raws li ib feem ntawm Bootstrap qhov kev hloov pauv CSS hloov pauv mus kom ze, toasts tam sim no siv cov CSS hauv zos .toastrau kev hloov kho lub sijhawm tiag tiag. Cov txiaj ntsig rau CSS qhov sib txawv tau teeb tsa ntawm Sass, yog li Sass customization tseem txhawb nqa, ib yam nkaus.

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

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

Kev siv

Pib pib toasts ntawm JavaScript:

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

Ua rau

Kev tshem tawm tuaj yeem ua tiav nrog tus datacwj pwm ntawm lub pob hauv lub toast raws li qhia hauv qab no:

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

los yog ntawm ib lub pob sab nraum lub toast siv data-bs-targetraws li qhia hauv qab no:

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

Kev xaiv

Raws li kev xaiv tuaj yeem dhau los ntawm cov ntaub ntawv tus cwj pwm lossis JavaScript, koj tuaj yeem ntxiv ib qho kev xaiv npe rau data-bs-, xws li hauv data-bs-animation="{value}". Nco ntsoov hloov cov ntaub ntawv ntawm lub npe xaiv los ntawm " camelCase " mus rau " kebab-case " thaum dhau cov kev xaiv ntawm cov ntaub ntawv cwj pwm. Piv txwv li, siv data-bs-custom-class="beautifier"es tsis txhob data-bs-customClass="beautifier".

Raws li ntawm Bootstrap 5.2.0, tag nrho cov khoom txhawb nqa qhov kev sim khaws tseg cov ntaub ntawv tus cwj pwm data-bs-configuas tuaj yeem ua tsev yooj yim kev teeb tsa raws li JSON txoj hlua. Thaum ib qho khoom muaj data-bs-config='{"delay":0, "title":123}'thiab data-bs-title="456"tus cwj pwm, tus titlenqi kawg yuav yog 456thiab cov ntaub ntawv sib cais yuav dhau los ntawm cov txiaj ntsig tau muab rau data-bs-config. Ntxiv mus, cov ntaub ntawv uas twb muaj lawm muaj peev xwm ua tsev JSON qhov tseem ceeb xws li data-bs-delay='{"show":0,"hide":150}'.

Lub npe	Hom	Default	Kev piav qhia
`animation`	boolean	`true`	Thov ib qho CSS ploj mus rau qhov toast.
`autohide`	boolean	`true`	Tsis siv neeg zais lub toast tom qab ncua.
`delay`	tus lej	`5000`	Ncua nyob rau hauv milliseconds ua ntej nkaum lub toast.

Cov txheej txheem

Asynchronous txoj kev thiab kev hloov

Txhua txoj kev API yog asynchronous thiab pib hloov pauv . Lawv rov qab mus rau tus neeg hu xov tooj sai li sai tau thaum qhov kev hloov pauv pib tab sis ua ntej nws xaus . Tsis tas li ntawd, ib txoj kev hu rau ib qho kev hloov pauv yuav raug tsis quav ntsej .

Saib peb cov ntaub ntawv JavaScript kom paub ntau ntxiv .

Txoj kev	Kev piav qhia
`dispose`	Hide ib qho khoom ci ci. Koj lub ncuav yuav nyob twj ywm ntawm DOM tab sis yuav tsis tshwm sim ntxiv lawm.
`getInstance`	Txoj kev zoo li qub uas tso cai rau koj kom tau txais qhov piv txwv toast txuam nrog DOM keeb. Piv txwv li: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)`Rov qab ib qho Bootstrap toast piv txwv.
`getOrCreateInstance`	Txoj kev zoo li qub uas tso cai rau koj kom tau txais qhov piv txwv toast txuam nrog DOM lub caij, lossis tsim ib qho tshiab, yog tias nws tsis tau pib. `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)`Rov qab ib qho Bootstrap toast piv txwv.
`hide`	Hide ib qho khoom ci ci. Rov qab mus rau tus neeg hu ua ntej qhov toast tau muab zais tiag tiag (piv txwv li ua ntej qhov `hidden.bs.toast`xwm txheej tshwm sim). Koj yuav tsum manually hu rau txoj kev no yog tias koj ua `autohide`rau `false`.
`isShown`	Rov qab boolean raws li toast lub visibility state.
`show`	Tshaj tawm ib qho khoom ci ci. Rov qab mus rau tus neeg hu ua ntej qhov toast tau tshwm sim tiag tiag (piv txwv li ua ntej qhov `shown.bs.toast`xwm txheej tshwm sim). Koj yuav tsum manually hu rau txoj kev no, es tsis txhob koj toast yuav tsis qhia.

Cov xwm txheej

Kev tshwm sim	Kev piav qhia
`hide.bs.toast`	Qhov xwm txheej no raug rho tawm haujlwm tam sim ntawd thaum `hide`hu ua piv txwv txoj kev.
`hidden.bs.toast`	Qhov kev tshwm sim no raug rho tawm haujlwm thaum lub toast tiav lawm muab zais los ntawm tus neeg siv.
`show.bs.toast`	Qhov xwm txheej no tua hluav taws tam sim ntawd thaum `show`hu ua piv txwv.
`shown.bs.toast`	Qhov kev tshwm sim no raug rho tawm haujlwm thaum lub ci ci tau pom rau tus neeg siv.

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