Jya ku bintu nyamukuru Jya kuri docs
Check
in English

Toost

Shyira amatangazo kubashyitsi bawe hamwe na toast, umutwaro woroshye kandi byoroshye guhinduranya ubutumwa.

Kuriyi page

Toast ni amatangazo yoroheje yagenewe kwigana amatangazo yo gusunika yakunzwe na sisitemu y'imikorere ya mobile na desktop. Zubatswe na flexbox, biroroshye rero guhuza no guhagarara.

Incamake

Ibintu ugomba kumenya mugihe ukoresheje plugin ya toast:

  • Toast irahitamo kubwimpamvu zikorwa, ugomba rero kubitangiza wenyine .
  • Toast izahita ihisha niba udasobanuye autohide: false.
Ingaruka ya animasiyo yibi bice biterwa prefers-reduced-motionnibibazo byitangazamakuru. Reba igice cyagabanijwe cyicyiciro cyibisobanuro byacu .

Ingero

Shingiro

Kugirango dushishikarize toast yagutse kandi iteganijwe, turasaba umutwe numubiri. Imitwe ya toast ikoresha display: flex, yemerera guhuza byoroshye ibikubiyemo dukesha margin na flexbox yingirakamaro.

Toast iroroshye guhinduka nkuko ubikeneye kandi ifite ibimenyetso bike bisabwa. Nibura, dukeneye ikintu kimwe kugirango gikubiyemo ibintu "byuzuye" kandi dushishikarize cyane buto yo kwirukana.

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>
Mbere, inyandiko zacu zongerewe imbaraga murwego .hiderwo guhisha rwose toast (hamwe display:none, aho kuba gusa opacity:0). Ubu ntibikiri ngombwa. Ariko, kugirango bishoboke gusubira inyuma, inyandiko yacu izakomeza guhinduranya icyiciro (nubwo nta mpamvu ifatika ikenewe) kugeza verisiyo ikurikira.

Urugero ruzima

Kanda buto hepfo kugirango werekane toast (ihagaze hamwe nibikorwa byacu mugice cyo hepfo yiburyo) yahishe muburyo budasanzwe.

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

Dukoresha JavaScript ikurikira kugirango dushyire ahagaragara toast nzima:

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

    toast.show()
  })
}

Birasobanutse

Toast irasobanutse gato kugirango ihuze nibiri munsi yabyo.

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>

Gushyira hamwe

Urashobora gutondekanya toasti uyiziritse mubikoresho bya toast, bizongera byongeweho umwanya.

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>

Ibirimo

Hindura toast yawe ukuraho ibice, uyihindure hamwe nibikorwa , cyangwa wongeyeho ikimenyetso cyawe. Hano twashizeho toast yoroshye mugukuraho ibisanzwe .toast-header, twongeraho igishushanyo cyihishe mugushushanya kwa Bootstrap , no gukoresha ibikoresho bya flexbox kugirango duhindure imiterere.

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>

Ubundi, urashobora kandi kongeramo ubugenzuzi nibindi bikoresho kuri 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>

Ibara

Kubaka kurugero ruvuzwe haruguru, urashobora gukora ibara ritandukanye rya toast hamwe nibara ryacu hamwe nibikorwa byingenzi. Hano twongeyeho .text-bg-primarykuri .toast, hanyuma twongera .btn-close-whitekuri buto yacu yegeranye. Kuburyo bworoshye, dukuraho imipaka isanzwe hamwe .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>

Gushyira

Shira toast hamwe na CSS yihariye nkuko ubikeneye. Hejuru iburyo bukoreshwa kenshi kubimenyeshwa, nkuko biri hejuru. Niba ugiye gusa kwerekana toast imwe icyarimwe, shyira uburyo bwo guhagarara neza kuri .toast.

Bootstrap Iminota 11 ishize
Mwaramutse, isi! Ubu ni ubutumwa bwuzuye.
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>

Kuri sisitemu zitanga ibisobanuro byinshi, tekereza gukoresha ikintu cyo gupfunyika kugirango zishobore gutondeka byoroshye.

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>

Urashobora kandi kubona ibintu byiza hamwe na flexbox yingirakamaro kugirango uhuze toast itambitse kandi / cyangwa uhagaritse.

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>

Kuboneka

Toast igenewe kuba intambamyi ntoya kubasuye cyangwa abakoresha, kugirango rero ufashe abafite abasomyi ba ecran hamwe nikoranabuhanga risa naryo rifasha, ugomba kuzinga toast yawe aria-livemukarere . Impinduka mukarere gatuye (nko gutera inshinge / kuvugurura ibice bya toast) birahita bitangazwa nabasomyi ba ecran bitabaye ngombwa ko wimura icyerekezo cyumukoresha cyangwa ubundi guhagarika umukoresha. Byongeye kandi, shyiramo aria-atomic="true"kwemeza ko toast yose ihora itangazwa nkigice kimwe (atome), aho gutangaza gusa ibyahinduwe (bishobora kugutera ibibazo uramutse uvuguruye gusa igice cyibirimo, cyangwa niba ugaragaza ibintu bimwe bya toast mugihe cyakera mugihe). Niba amakuru akenewe ari ingenzi kubikorwa, urugero kurutonde rwamakosa muburyo, hanyuma ukoreshe ibice byo kumenyeshaaho toast.

Menya ko akarere kazima gakeneye kuba mubimenyetso mbere yuko toast ikorwa cyangwa ivugururwa. Niba ubyara umusaruro byombi icyarimwe hanyuma ukabitera kurupapuro, mubisanzwe ntabwo bizatangazwa nikoranabuhanga rifasha.

Ugomba kandi guhuza roleurwego aria-livenurwego ukurikije ibirimo. Niba ari ubutumwa bwingenzi nkikosa, koresha role="alert" aria-live="assertive", ubundi ukoreshe role="status" aria-live="polite"ibiranga.

Nkibirimo ugaragaza impinduka, menya neza kuvugurura delayigihe kugirango abakoresha babone umwanya uhagije wo gusoma 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>

Mugihe ukoresha autohide: false, ugomba kongeramo buto yegeranye kugirango wemerere abakoresha kwirukana 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>

Mugihe muburyo bwa tekiniki birashoboka kongeramo ibitekerezo byibanze / bigenzurwa (nka buto yinyongera cyangwa amahuza) muri toast yawe, ugomba kwirinda kubikora kubwimodoka. Nubwo waha toast umwanya muremure , delayclavier hamwe nabafasha gukoresha ikoranabuhanga birashobora kugorana kugera kuri toast mugihe cyo gufata ingamba (kubera ko toast itakira intumbero iyo yerekanwe). Niba ugomba rwose kugira ubundi bugenzuzi, turasaba gukoresha toast hamwe autohide: false.

CSS

Ibihinduka

Wongeyeho muri v5.2.0

Nkigice cya Bootstrap igenda ihindagurika CSS ihinduka, toast ubu ikoresha CSS yaho ihinduka .toastkugirango yongere igihe nyacyo cyo kwihindura. Indangagaciro za CSS zihinduka zashyizweho binyuze kuri Sass, so Sass yihariye iracyashyigikiwe, nayo.

  --#{$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};

Ibihinduka bya Sass

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

Ikoreshwa

Gutangiza toast ukoresheje JavaScript:

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

Imbarutso

Kwirukanwa birashobora kugerwaho hamwe datanibiranga kuri buto muri toast nkuko bigaragara hano:

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

cyangwa kuri buto hanze ya toast ukoresheje data-bs-targetnkuko bigaragara hano:

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

Amahitamo

Nkuko amahitamo ashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript, urashobora kongeramo izina ryamahitamo data-bs-, nkuko biri data-bs-animation="{value}". Witondere guhindura ubwoko bwurubanza rwamahitamo kuva " ingamiya " kuri " kebab-urubanza " mugihe utambutsa amahitamo ukoresheje ibiranga amakuru. Kurugero, koresha data-bs-custom-class="beautifier"aho data-bs-customClass="beautifier".

Nko muri Bootstrap 5.2.0, ibice byose bishyigikira igeragezwa ryibitse ryamakuru data-bs-configrishobora kubamo ibice byoroshye nkibikoresho bya JSON. Mugihe ikintu gifite data-bs-config='{"delay":0, "title":123}'nibiranga data-bs-title="456", agaciro kanyuma titlekazaba 456kandi amakuru yihariye aranga agaciro katanzwe kuri data-bs-config. Mubyongeyeho, amakuru ariho aranga arashobora kubika JSON indangagaciro nka data-bs-delay='{"show":0,"hide":150}'.

Izina Andika Mburabuzi Ibisobanuro
animation boolean true Koresha CSS igenda ihinduka kuri toast.
autohide boolean true Mu buryo bwikora uhishe toast nyuma yo gutinda.
delay umubare 5000 Gutinda muri milisegonda mbere yo guhisha toast.

Uburyo

Uburyo butajegajega ninzibacyuho

Inzira zose za API ntizihuza kandi zitangira inzibacyuho . Basubira kumuhamagara mugihe inzibacyuho itangiye ariko itararangira . Mubyongeyeho, uburyo bwo guhamagarira ibice byinzibacyuho bizirengagizwa .

Reba inyandiko zacu za JavaScript kubindi bisobanuro .

Uburyo Ibisobanuro
dispose Hisha toast yikintu. Toast yawe izaguma kuri DOM ariko ntizongera kwerekana.
getInstance Uburyo buhamye butuma ubona urugero rwa toast rujyanye nibintu bya DOM.
Kurugero: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)Garuka Bootstrap toast urugero.
getOrCreateInstance Uburyo buhamye bugufasha kubona urugero rwa toast rujyanye nibintu bya DOM, cyangwa gukora bundi bushya, mugihe bitatangijwe.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)Garuka Bootstrap toast urugero.
hide Hisha toast yikintu. Garuka kumuhamagaye mbere yuko toast ihishwa mubyukuri (nukuvuga mbere yuko hidden.bs.toastibyabaye biba). Ugomba guhamagara intoki ubu buryo niba autohidewabikoze false.
isShown Garura boolean ukurikije uko toast igaragara.
show Kugaragaza toast yikintu. Garuka kumuhamagaye mbere yuko toast yerekanwe mubyukuri (nukuvuga mbere yuko shown.bs.toastibyabaye biba). Ugomba guhamagara intoki ubu buryo, ahubgo toast yawe ntizerekana.

Ibyabaye

Icyabaye Ibisobanuro
hide.bs.toast Ibi birori birahita bisohoka mugihe uburyo hidebwurugero bwahamagawe.
hidden.bs.toast Ibirori birukanwa mugihe toast yarangije guhishwa uyikoresha.
show.bs.toast Ibirori birasa ako kanya mugihe showurugero rwitwa.
shown.bs.toast Ibi birori birukanwa mugihe toast yakozwe kubakoresha. 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})