Svetuka kune chikuru content Svetuka kuenda kudocs navigation
Check
in English

Toasts

Push zviziviso kune vashanyi vako ine toast, yakareruka uye inogoneka nyore yambiro meseji.

Pa peji ino

Toasts zviziviso zvakareruka zvakagadzirirwa kutevedzera zviziviso zvepush izvo zvakafarirwa nenharembozha uye desktop inoshanda masisitimu. Iwo akavakwa neflexbox, saka ari nyore kurongedza uye chinzvimbo.

Overview

Zvinhu zvekuziva kana uchishandisa toast plugin:

  • Toasts inosarudza-kupinda nekuda kwezvikonzero zvekuita, saka iwe unofanirwa kuzvitangisa iwe pachako .
  • Toasts inongozvivanza kana ukasatsanangura autohide: false.
Iyo animation mhedzisiro yechikamu ichi zvinoenderana prefers-reduced-motionnemubvunzo wenhau. Ona chikamu chakaderedzwa chezvinyorwa zvedu zvekusvikika .

Mienzaniso

Basic

Kuti tikurudzire kuwedzera uye kufungidzira toasts, tinokurudzira musoro uye muviri. Toast misoro inoshandisa display: flex, ichibvumira kurongedza zviri nyore zvemukati nekuda kwemargin uye flexbox zvishandiso.

Toasts anochinjika sezvaunoda uye ane mashoma anodiwa markup. Zvirinani, isu tinoda chinhu chimwe chete kuti chive nezvako "zvakaomeswa" uye kukurudzira zvakasimba bhatani rekudzinga.

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>
Pakutanga, zvinyorwa zvedu zvakawedzera .hidekirasi kuti ivanze zvachose toast (ne display:none, pane kungova ne opacity:0). Izvi hazvichadiwi zvakare. Nekudaro, kuitira kuenderana kumashure, script yedu icharamba ichishandura kirasi (kunyangwe pasina iyo inoshanda kudikanwa kwayo) kusvika iyo inotevera vhezheni huru.

Rarama muenzaniso

Dzvanya bhatani riri pazasi kuratidza toast (yakamisikidzwa nezvishandiso zvedu mukona yekurudyi) iyo yakavanzwa nekusarudzika.

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

Isu tinoshandisa inotevera JavaScript kukonzeresa yedu mhenyu 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 anopenya zvishoma kuti asanganise nezviri pazasi pawo.

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

Iwe unogona kurongedza toast nekuzviputira mumudziyo wekuputira, izvo zvinozowedzera kuwedzera imwe nzvimbo.

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>

Custom content

Gadzirisa ma toast ako nekubvisa madiki-zvikamu, uchiabatanidza nezvishandiso , kana nekuwedzera yako markup. Pano takagadzira toast yakapfava nekubvisa iyo yakasarudzika .toast-header, tichiwedzera tsika yekuvanza icon kubva kuBootstrap Icons , uye kushandisa zvimwe flexbox utilities kugadzirisa marongero.

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>

Neimwe nzira, iwe unogona zvakare kuwedzera mamwe ekudzora uye zvikamu kune 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>

Zvirongwa zvemavara

Kuvaka pamuenzaniso wepamusoro, iwe unogona kugadzira akasiyana toast color zvirongwa neruvara rwedu uye zvemashure zvinoshandiswa. Pano tawedzera .text-bg-primarykune .toast, uye towedzera .btn-close-whitekune yedu yekuvhara bhatani. Kune crisp mupendero, tinobvisa muganho wakasarudzika ne .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>

Placement

Isa ma toast ane tsika CSS sezvaunoda iwo. Kurudyi kwepamusoro kunowanzo shandiswa pazviziviso, sezvakaita wepakati wepamusoro. Kana uchizongoratidza tositi imwe panguva, isa zvitaera zvekumisikidza ipapo pa .toast.

Bootstrap 11 mins yapfuura
Mhoro, nyika! Iri ishoko re 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>

Kune masisitimu anogadzira zviziviso zvakawanda, funga kushandisa chinhu chekuputira kuti zvigone kurongedza zviri nyore.

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>

Iwe unogona zvakare kuwana fancy neflexbox utilities kuti uenzanise toasts yakatwasuka uye/kana yakatwasuka.

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>

Accessibility

Toasts inoitirwa kuve kukanganisa kudiki kune vashanyi vako kana vashandisi, saka kubatsira avo vane skrini yekuverenga uye yakafanana tekinoroji yekubatsira, unofanirwa kuputira ma toast akoaria-live munharaunda . Shanduko kumatunhu anogara (sekubaya jekiseni / kuvandudza chikamu chetositi) anoziviswa otomatiki nevaverengi vescreen pasina chikonzero chekufambisa chinotariswa nemushandisi kana kukanganisa mushandisi. Pamusoro pezvo, sanganisira aria-atomic="true"kuve nechokwadi chekuti toast yese inogara ichiziviswa sechinhu chimwe chete (atomic) unit, pane kungozivisa zvakachinjwa (izvo zvinogona kuunza matambudziko kana iwe ukangovandudza chikamu cheiyo toast yemukati, kana kuratidza yakafanana munguva inotevera). Kana ruzivo rwuri kudiwa rwakakosha pakuita, semuenzaniso kune rondedzero yezvikanganiso mufomu, zvino shandisa chikamu chekuzivisa .panzvimbo yetoast.

Ziva kuti nharaunda mhenyu inoda kuvepo mumarkup isati yagadzirwa kana kuvandudzwa. Kana iwe ukagadzira zvese zviri zviviri panguva imwe chete uye wozvipinza mupeji, hazviwanzo kuziviswa neanobatsira matekinoroji.

Iwe zvakare unofanirwa kugadzirisa iyo roleuye aria-livenhanho zvichienderana nezviri mukati. Kana iri meseji yakakosha senge kukanganisa, shandisarole="alert" aria-live="assertive" , kana zvisina kudaro shandisa role="status" aria-live="polite"hunhu.

Sezvo zvirimo zvauri kuratidza zvachinja, ita chokwadi chekugadzirisa delaynguva yekubuda kuitira kuti vashandisi vawane nguva yakakwana yekuverenga 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>

Paunenge uchishandisa autohide: false, iwe unofanirwa kuwedzera bhatani rekuvhara kuti ubvumire vashandisi kudzinga 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>

Nepo tekinoroji zvichikwanisika kuwedzera zvinotariswa/zvinoita zvidzoreso (zvakadai semamwe mabhatani kana zvinongedzo) mune yako toast, iwe unofanirwa kudzivirira kuita izvi kune autohiding toasts. Kunyangwe iwe ukapa toast nguva yakareba delay, vashandisi vekhibhodi uye yekubatsira tekinoroji vangaomerwa nekusvika kune toast nenguva kutora chiito (sezvo toast isingagamuchire kutarisa kana ichiratidzwa). Kana iwe uchifanirwa kuve nekumwe kutonga, tinokurudzira kushandisa toast ine autohide: false.

CSS

Variables

Yakawedzerwa mu v5.2.0

Sechikamu cheBootstrap's evolving CSS variables approach, toasts ikozvino inoshandisa yemuno CSS madhizaini pane .toastyekuvandudza chaiyo-nguva kugadzirisa. Hwaro hwemhando dzeCSS dzakaiswa kuburikidza neSass, saka Sass customization ichiri kutsigirwa, zvakare.

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

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

Usage

Tanga toasts kuburikidza neJavaScript:

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

Zvikonzero

Kudzingwa kunogona kuwanikwa datanehunhu huri pabhatani mukati metoast sezvakaratidzwa pazasi:

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

kana pabhatani riri kunze kwetositi uchishandisa data-bs-targetsezvaratidzwa pazasi:

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

Options

Sezvo sarudzo dzichigona kupfuudzwa kuburikidza nedata hunhu kana JavaScript, unogona kuisa sarudzo zita ku data-bs-, semu data-bs-animation="{value}". Ita shuwa yekushandura mhando yekesi yezita resarudzo kubva ku " camelCase " kuenda ku " kebab-case " kana uchipfuura sarudzo kuburikidza ne data hunhu. Somuenzaniso, shandisa data-bs-custom-class="beautifier"pane data-bs-customClass="beautifier".

Kubva kuBootstrap 5.2.0, zvese zvinongedzo zvinotsigira muyedzo wakachengetedzwa data hunhu data-bs-confighunogona kuisa akareruka chechikamu kumisikidzwa setambo yeJSON. Kana chinhu chine data-bs-config='{"delay":0, "title":123}'uye data-bs-title="456"hunhu, kukosha kwekupedzisira titlekuchave 456uye iyo yakaparadzana data hunhu inodarika kukosha kwakapihwa pa data-bs-config. Pamusoro pezvo, hunhu huripo hwe data hunokwanisa kuisa hunhu hweJSON senge data-bs-delay='{"show":0,"hide":150}'.

Zita Type Default Tsanangudzo
animation boolean true Isa CSS fade shanduko kune toast.
autohide boolean true Vanza otomatiki toast mushure mekunonoka.
delay nhamba 5000 Kunonoka mumamilliseconds usati wavanza toast.

Nzira

Asynchronous nzira uye shanduko

Yese nzira dzeAPI dzine asynchronous uye dzinotanga shanduko . Vanodzokera kumunhu anenge afona pachangotanga shanduko asi isati yapera . Pamusoro pezvo, kufona kwenzira pachikamu chekuchinja kuchafuratirwa .

Ona zvinyorwa zvedu zveJavaScript kuti uwane rumwe ruzivo .

Nzira Tsanangudzo
dispose Inovanza toast yechimwe chinhu. Toast yako icharamba iri paDOM asi haicharatidzike zvakare.
getInstance Static nzira iyo inokutendera iwe kuti uwane iyo toast muenzaniso yakabatana neiyo DOM chinhu.
Semuenzaniso: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)Inodzosa muenzaniso weBootstrap toast.
getOrCreateInstance Static nzira iyo inokutendera iwe kuti uwane iyo toast muenzaniso yakabatana neDOM chinhu, kana kugadzira imwe nyowani, kana isina kutangwa.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)Inodzosa muenzaniso weBootstrap toast.
hide Inovanza toast yechimwe chinhu. Inodzokera kumunhu anodaidzira isati yanyatsovanzwa (kureva kuti hidden.bs.toastchiitiko chisati chaitika). Iwe unofanirwa kufonera iyi nzira kana iwe wakaita autohideku false.
isShown Inodzosa boolean zvichienderana nekuonekwa kwetositi.
show Inoratidza toast yechinhu. Inodzokera kumunhu anodaidzira isati yanyatsoratidzwa (kureva kuti shown.bs.toastchiitiko chisati chaitika). Iwe unofanirwa kufonera iyi nzira, pachinzvimbo chako toast hairatidze.

Zviitiko

Chiitiko Tsanangudzo
hide.bs.toast Ichi chiitiko chinodzingwa nekukasira kana iyo hidemuenzaniso nzira yadaidzwa.
hidden.bs.toast Ichi chiitiko chinodzingwa kana toast yapedza kuvanzwa kubva kumushandisi.
show.bs.toast Ichi chiitiko chinopisa nekukasira kana shownzira yemuenzaniso inodanwa.
shown.bs.toast Ichi chiitiko chinodzingwa kana toast yaitwa kuti ionekwe kumushandisi. 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})