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 xaiv rau qhov ua tau zoo, yog li koj yuav tsum pib pib lawv tus kheej .
Toasts yuav cia li nkaum yog tias koj tsis qhia autohide: false.

Cov nyhuv animation ntawm cov khoom 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.

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

Nyob

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

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

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.

<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

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

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.

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

<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 .bg-primarythiab .text-whiterau 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.

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

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

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

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

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

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.

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

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

Sass

Hloov pauv

$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(0, 0, 0, .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(0, 0, 0, .05);

Kev siv

Pib pib toasts ntawm JavaScript:

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, option)
})

Kev xaiv

Cov kev xaiv tuaj yeem dhau los ntawm cov ntaub ntawv tus cwj pwm lossis JavaScript. Rau cov ntaub ntawv tus cwj pwm, ntxiv rau qhov kev xaiv npe rau data-bs-, xws li hauv data-bs-animation="".

Lub npe	Hom	Default	Kev piav qhia
`animation`	boolean	`true`	Thov ib qho CSS ploj mus rau qhov toast
`autohide`	boolean	`true`	Nws pib zais lub toast
`delay`	tus lej	`5000`	Ncua zais qhov ci ci (ms)

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 kev hloov pauv yuav raug tsis quav ntsej .

Saib peb cov ntaub ntawv JavaScript kom paub ntau ntxiv .

ua yeeb yam

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.toastxwm txheej tshwm sim). Koj yuav tsum manually hu rau txoj kev no, es tsis txhob koj toast yuav tsis qhia.

toast.show()

zais

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.toastxwm txheej tshwm sim). Koj yuav tsum manually hu rau txoj kev no yog tias koj ua autohiderau false.

toast.hide()

pov tseg

Hide ib qho khoom ci ci. Koj lub ncuav yuav nyob twj ywm ntawm DOM tab sis yuav tsis tshwm sim ntxiv lawm.

toast.dispose()

getInstance

Txoj kev zoo li qub uas tso cai rau koj kom tau txais qhov piv txwv scrollspy txuam nrog DOM lub caij

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

getOrCreateInstance

Txoj kev zoo li qub uas tso cai rau koj kom tau txais qhov piv txwv scrollspy txuam nrog DOM lub caij, lossis tsim ib qho tshiab yog tias nws tsis tau pib

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

Cov xwm txheej

Hom xwm txheej	Kev piav qhia
`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.
`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.

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