Yeqela kokuqukethwe okuyinhloko Yeqela ku-docs navigation
Check
in English

Amathosti

Phusha izaziso kubavakashi bakho ngethosti, umlayezo ongasindi futhi owenzeka ngokwezifiso isixwayiso.

Kuleli khasi

Amathosta ayizaziso ezilula eziklanyelwe ukulingisa izaziso eziye zaduma amasistimu okusebenza eselula nawedeskithophu. Akhiwe nge-flexbox, ngakho kulula ukuwaqondanisa nokuma.

Uhlolojikelele

Izinto okufanele uzazi uma usebenzisa i-plugin ye-toast:

  • Amathosti angena ngenxa yezizathu zokusebenza, ngakho-ke kuzomele uwaqalise ngokwakho .
  • Amathosti azofihla ngokuzenzakalelayo uma ungacacisi autohide: false.
Umthelela wokugqwayiza wale ngxenye uncike prefers-reduced-motionembuzweni wemidiya. Bona ingxenye yokunyakaza encishisiwe yemibhalo yethu yokufinyeleleka .

Izibonelo

Okuyisisekelo

Ukuze ukhuthaze amathosi anwebekayo futhi abikezelwe, sincoma unhlokweni nomzimba. Kusetshenziswa izihloko ze -toast display: flex, ezivumela ukuqondanisa kalula kokuqukethwe ngenxa yezinsiza zethu zemajini kanye ne-flexbox.

Amathosti avumelana nezimo ngendlela oyidingayo futhi anemakhaphu amancane kakhulu adingekayo. Okungenani, sidinga into eyodwa ukuthi iqukathe okuqukethwe kwakho "okuthosiwe" futhi ikhuthaze ngokuqinile inkinobho yokucashisa.

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>
Ngaphambilini, imibhalo yethu yengeze .hideikilasi ngokushintshayo ukuze ifihle ngokuphelele ithosi (nge display:none, kunokuba nje nge opacity:0). Lokhu manje akusadingeki. Kodwa-ke, ukuze kuhambisane nokubuyela emuva, iskripthi sethu sizoqhubeka nokuguqula ikilasi (yize singekho isidingo saso) kuze kube inguqulo enkulu elandelayo.

Isibonelo esiphilayo

Chofoza inkinobho engezansi ukuze ubonise ithosi (ebekwe nezinsiza zethu ekhoneni elingezansi kwesokudla) esifihlwe ngokuzenzakalelayo.

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

Sisebenzisa i-JavaScript elandelayo ukuze siqalise idemo yethu ye-toast ebukhoma:

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

    toast.show()
  })
}

I-Translucent

Amathosti ashintshashintsha kancane ukuze ahlangane nalokho okungaphansi kwawo.

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>

Ukupakisha

Ungakwazi ukunqwabelanisa ama-toast ngokuwagoqa esitsheni se-toast, esizokwengeza izikhala ngokuma mpo.

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>

Okuqukethwe ngokwezifiso

Enza ngendlela oyifisayo amathosti akho ngokususa izingxenye ezincane, uzihlanganise nezinsiza , noma ngokwengeza imakhaphu yakho. Lapha sidale i-toast elula ngokususa okumisiwe .toast-header, sengeza isithonjana sokufihla ngokwezifiso kokuthi Izithonjana ze-Bootstrap , nokusebenzisa ezinye izinsiza ze- flexbox ukuze ulungise isakhiwo.

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>

Kungenjalo, ungakwazi futhi ukwengeza izilawuli ezengeziwe kanye nezingxenye kumathosi.

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>

Izikimu zombala

Ngokwakhela kulesi sibonelo esingenhla, ungakha izikimu zombala wethosti ahlukene ngombala wethu nezinsiza zangemuva . Lapha sengeze .text-bg-primaryku- .toast, bese .btn-close-whitesengeza enkinobheni yethu yokuvala. Ngonqenqema oluhlanzekile, sisusa umngcele ozenzakalelayo nge- .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>

Ukubekwa

Beka amathosti nge-CSS yangokwezifiso njengoba uwadinga. Ingaphezulu kwesokudla livame ukusetshenziselwa izaziso, njengoba kunjalo nendawo ephakathi ephezulu. Uma uzobonisa ithosi eyodwa ngesikhathi, beka izitayela zokuma khona kanye ku- .toast.

I-Bootstrap 11 amaminithi edlule
Sawubona Mhlaba! Lona umlayezo we-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>

Kumasistimu akhiqiza izaziso eziningi, cabanga ukusebenzisa i-elementi yokugoqa ukuze akwazi ukunqwabelanisa kalula.

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>

Ungakwazi futhi ukunethezeka ngezinsiza ze-flexbox ukuze uqondanise amathosta ngokuvundlile kanye/noma ngokuqondile.

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>

Ukufinyeleleka

Amathosi enzelwe ukuthi abe yiziphazamiso ezincane kubavakashi bakho noma abasebenzisi, ngakho-ke ukuze usize labo abanezifundi zesikrini nobuchwepheshe obufanayo bokusiza, kufanele usonge amathosi akho aria-liveendaweni . Izinguquko ezifundeni ezibukhoma (njengokujova/ukubuyekeza ingxenye ye-toast) zimenyezelwa ngokuzenzakalelayo izifundi zesikrini ngaphandle kokudinga ukuhambisa ukugxila komsebenzisi noma ukuphazamisa umsebenzisi. Ukwengeza, faka aria-atomic="true"ukuqinisekisa ukuthi yonke ithosti ihlale imenyezelwa njengeyunithi eyodwa (ye-athomu), kunokuba nje umemezele lokho okushintshiwe (okungaholela ezinkingeni uma ubuyekeza kuphela ingxenye yokuqukethwe kwethosti, noma uma ubonisa okuqukethwe kwethosti efanayo. ngokuhamba kwesikhathi). Uma ulwazi oludingekayo lubalulekile kunqubo, isb ngohlu lwamaphutha efomini, sebenzisa ingxenye yesixwayiso .esikhundleni se-toast.

Qaphela ukuthi indawo ebukhoma idinga ukuba khona kumakhaphu ngaphambi kokuthi i-toast yenziwe noma ibuyekezwe. Uma ukukhiqiza kokubili ngesikhathi esisodwa futhi ukujove ekhasini, ngokuvamile ngeke kumenyezelwe ngobuchwepheshe obusizayo.

Udinga futhi ukuzivumelanisa rolenezinga aria-livengokuya ngokuqukethwe. Uma kungumlayezo obalulekile njengephutha, sebenzisa role="alert" aria-live="assertive", uma kungenjalo sebenzisa role="status" aria-live="polite"izibaluli.

Njengoba okuqukethwe okubonisayo kushintsha, qiniseka ukuthi ubuyekeza delayukuphela kwesikhathi ukuze abasebenzisi babe nesikhathi esanele sokufunda ithosti.

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

Uma usebenzisa autohide: falsei-, kufanele wengeze inkinobho yokuvala ukuze uvumele abasebenzisi ukuthi bachithe ithosti.

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>

Nakuba ngokobuchwepheshe kungenzeka ukwengeza izilawuli ezigxilisa ingqondo/ezingenziwa (njengezinkinobho ezengeziwe noma izixhumanisi) kuthosti yakho, kufanele ugweme ukwenza lokhu ukuze ufihle amathosi ngokuzenzakalela. Ngisho noma unikeza i-toast isikhathi eside delay, abasebenzisi bekhibhodi nobuchwepheshe bokusiza bangase bakuthole kunzima ukufinyelela i-toast ngesikhathi ukuze bathathe isinyathelo (njengoba amathosti awakutholi ukugxila lapho eboniswa). Uma kufanele ube nezilawuli ezengeziwe, sincoma ukuthi usebenzise ithosti ene- autohide: false.

CSS

Okuguquguqukayo

Kwengezwe ku-v5.2.0

Njengengxenye yendlela yokuguquguquka kwe-CSS ye-Bootstrap, amathosti manje asebenzisa okuguquguqukayo kwasendaweni kwe-CSS .toastukuze enze ngokwezifiso isikhathi sangempela esithuthukisiwe. Amanani okuguquguquka kwe-CSS asethwa nge-Sass, ngakho ukwenza ngokwezifiso kwe-Sass kusasekelwa, nakho.

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

Izinguquko ze-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);

Ukusetshenziswa

Qalisa ama-toast nge-JavaScript:

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

Izicupha

Ukuxoshwa kungafinyelelwa ngesibaluli esisenkinobho engaphakathi kwethostidata njengoba kuboniswe ngezansi:

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

noma enkinobho engaphandle kwethosti usebenzisa lokhu data-bs-targetokuboniswe ngezansi:

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

Izinketho

Njengoba izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript, ungakwazi ukwengeza igama lenketho kokuthi data-bs-, njengaku data-bs-animation="{value}". Qiniseka ukuthi ushintsha uhlobo lwekesi legama lenketho lisuka ku- “ camelCase ” liye ku- “ kebab-case ” lapho udlulisa izinketho ngezibaluli zedatha. Isibonelo, sebenzisa data-bs-custom-class="beautifier"esikhundleni se- data-bs-customClass="beautifier".

Kusukela ku-Bootstrap 5.2.0, zonke izingxenye zisekela isibaluli sedatha egodliwe esihlolwayodata-bs-config esingafaka ukucushwa kwengxenye elula njengochungechunge lwe-JSON. Uma into inezibaluli , inani lokugcina lizoba data-bs-config='{"delay":0, "title":123}'futhi izibaluli zedatha ezihlukene zizokhipha amanani anikezwe ngomhla ka- . Ngaphezu kwalokho, izibaluli zedatha ezikhona ziyakwazi ukubeka amanani e-JSON afana .data-bs-title="456"title456data-bs-configdata-bs-delay='{"show":0,"hide":150}'

Igama Uhlobo Okuzenzakalelayo Incazelo
animation boolean true Faka inguquko ye-CSS fade ku-toast.
autohide boolean true Fihla ngokuzenzakalelayo ithosti ngemva kokubambezeleka.
delay inombolo 5000 Libazisa ngama-millisecond ngaphambi kokufihla ithosti.

Izindlela

Izindlela ze-Asynchronous kanye noshintsho

Zonke izindlela ze-API azivumelanisi futhi ziqala inguquko . Babuyele kofonayo uma sekuqalwa uguquko kodwa lungakapheli . Ngokungeziwe, ikholi yendlela engxenyeni yoshintsho izozitshwa .

Bheka imibhalo yethu ye-JavaScript ukuze uthole ulwazi olwengeziwe .

Indlela Incazelo
dispose Ifihla ithosi yento. Ithosi lakho lizohlala ku-DOM kodwa ngeke lisavela.
getInstance Indlela emile ekuvumela ukuthi uthole isibonelo se-toast esihlotshaniswa nento ye-DOM.
Isibonelo: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)Ibuyisela isibonelo se-Bootstrap toast.
getOrCreateInstance Indlela emile ekuvumela ukuthi uthole isenzakalo se-toast esihlotshaniswa nento ye-DOM, noma udale entsha, uma kwenzeka ingaqaliswanga.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)Ibuyisela isibonelo se-Bootstrap toast.
hide Ifihla ithosi yento. Ibuyela kofonayo ngaphambi kokuthi ithosi ifihlekile (okungukuthi ngaphambi kokuthi hidden.bs.toastkwenzeke umcimbi). Kufanele ushayele le ndlela mathupha uma wenze autohideku- false.
isShown Ibuyisela i-boolean ngokuya ngesimo sokubonakala kwethosti.
show Iveza ithosi yento. Ibuyela kofonayo ngaphambi kokuthi kuboniswe ithosi (okungukuthi ngaphambi kokuba shown.bs.toastumcimbi wenzeke). Kufanele ushayele le ndlela mathupha, kunalokho ithosi lakho ngeke livele.

Imicimbi

Umcimbi Incazelo
hide.bs.toast Lo mcimbi uxoshwa ngokushesha lapho hideindlela yesibonelo ibizwa.
hidden.bs.toast Lo mcimbi uxoshwa lapho ithosti isiqedile ukufihlwa kumsebenzisi.
show.bs.toast Lo mcimbi uvutha ngokushesha lapho showindlela yesibonelo ibizwa.
shown.bs.toast Lo mcimbi uxoshwa lapho i-toast yenziwe yabonakala kumsebenzisi. 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})