Biçe ser naveroka sereke Biçe navîgasyon belgeyan
Check
in English

Toasts

Agahdariyên ji bo mêvanên xwe bi toast, peyamek hişyariya sivik û bi hêsanî xwerû bişînin.

Li ser vê rûpelê

Toasts notifications sivik in ku ji bo teqlîdkirina notifications push ku ji hêla pergalên xebitandinê yên mobîl û sermaseyê ve hatine populer kirin hatine çêkirin. Ew bi flexbox-ê hatine çêkirin, ji ber vê yekê ew bi hev veqetandin û pozîsyonê hêsan in.

Têgihiştinî

Tiştên ku divê hûn zanibin dema ku pêveka toast bikar tînin:

  • Toast ji ber sedemên performansê têne hilbijartin, ji ber vê yekê divê hûn bi xwe wan dest pê bikin .
  • Ger tu diyar nekî Toast dê bixweber veşêrin autohide: false.
Bandora anîmasyonê ya vê hêmanê bi pirsa prefers-reduced-motionmedyayê ve girêdayî ye. Binêre beşa tevgera kêmkirî ya belgeya gihîştina me .

Examples

Bingehîn

Ji bo teşwîqkirina tostên berfireh û pêşbînîkirî, em sernav û laşek pêşniyar dikin. Sernavên Toast bikar tînin display: flex, bi saya karûbarên meya marjînal û flexbox-ê rê dide hevrêzkirina naverokê hêsan.

Toast bi qasî ku hûn hewce ne maqûl in û îşaretek pir hindik hewce ne. Bi kêmanî, em ji hêmanek yekane hewce dikin ku naveroka weya "toast" hebe û bi tundî bişkokek betalkirinê teşwîq bike.

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>
Berê, skrîptên me bi dînamîk çîn lê zêde .hidekirin da ku tostek bi tevahî veşêre (bi display:none, ne tenê bi opacity:0). Ev êdî ne pêwîst e. Lêbelê, ji bo lihevhatina paşverû, skrîpta me dê heya guhertoya sereke ya din veguheztina polê bidomîne (her çend hewcedariya wê ya pratîkî tune be).

Mînaka zindî

Bişkojka jêrîn bikirtînin da ku toastek (bi karûbarên me yên li quncika jêrîn a rastê ve hatî cîh kirin) ku ji hêla xwerû ve hatî veşartin nîşan bide.

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

Em JavaScript-a jêrîn bikar tînin da ku demo-ya toastê ya zindî bidin destpêkirin:

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

    toast.show()
  })
}

Translucent

Toast hinekî şefaf in ku bi ya ku li binê wan heye re tevbigerin.

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

Hûn dikarin tostanan bi pêçandina wan di konteynirek toastê de bixin stûyê, ku dê bi rengek vertîkal hin cîh lê zêde bike.

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>

naveroka Custom

Toastên xwe bi rakirina bine-pêkmanan, guheztina wan bi karûbaran , an bi lê zêdekirina nîşankirina xweya xwe xweş bikin. Li vir me bi rakirina .toast-headerxwerû, îkonek veşartî ya xwerû ya ji îkonên Bootstrap -ê zêde kir , û bi karanîna hin karûbarên flexbox -ê ji bo eyarkirina layoutê ve toastek hêsantir çêkir .

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>

Wekî din, hûn dikarin kontrol û hêmanên din jî li toastan zêde bikin.

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>

Rengên rengan

Li ser mînaka jorîn ava kirin, hûn dikarin bi karûbarên meya reng û paşerojê re nexşeyên rengên cûda yên toast biafirînin . Li vir me li .text-bg-primary, .toastû dûv .btn-close-whitere li bişkoka xweya girtina xwe zêde kir. Ji bo perdeyek hişk, em sînorê xwerû bi .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>

Cihkirin

Li gorî ku hûn hewce ne bi CSS-ya xwerû toastan bi cih bikin. Rastê jorîn bi gelemperî ji bo ragihandinê tê bikar anîn, wekî navîna jorîn. Ger hûn ê her gav tenê yek tost nîşan bidin, şêwazên pozîsyonê rast li ser bixin .toast.

Bootstrap 11 deqîqe berê
Silav, dinya! Ev peyamek toast e.
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>

Ji bo pergalên ku bêtir agahdarî diafirînin, bi karanîna hêmanek pêçandî bifikirin da ku ew bi hêsanî bicivînin.

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>

Her weha hûn dikarin bi karûbarên flexbox-ê xweş bibin da ku tostanan bi horizontî û/an verastalî hev bikin.

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>

Gihîştina

Toast têne armanc kirin ku ji bo serdan an bikarhênerên we re qutkirinên piçûk bin, ji ber vê yekê ji bo ku hûn bi xwendevanên ekranê û teknolojiyên alîkar ên mîna wan re bibin alîkar, divê hûn tostanên xwe li aria-liveherêmek bipêçin . Guhertinên li herêmên zindî (wek derzîkirin/nûvekirina hêmanek toast) bixweber ji hêla xwendevanên ekranê ve têne ragihandin bêyî ku hewce bike ku bala bikarhêner biguhezîne an bi rengek din bikarhêner were qut kirin. Wekî din, têxin nav aria-atomic="true"xwe da ku hûn pê ewle bibin ku tevahî toast her gav wekî yekîneyek yekane (atomî) tê ragihandin, ji bilî ragihandina tiştê ku hatî guhertin (ku dibe sedema pirsgirêkan heke hûn tenê beşek ji naveroka toast nûve bikin, an heke heman naveroka toastê nîşan bidin. di demeke paşîn de). Ger agahdariya ku hewce dike ji bo pêvajoyê girîng e, mînakî ji bo navnîşek xeletiyên di formekê de, wê hingê beşa hişyariyê bikar bînin.li şûna toast.

Bala xwe bidinê ku berî ku toast were çêkirin an nûvekirin pêdivî ye ku devera zindî di nîşankirinê de hebe. Ger hûn di heman demê de herduyan bi dînamîk biafirînin û wan di rûpelê de derxînin, ew ê bi gelemperî ji hêla teknolojiyên arîkar ve neyên ragihandin.

Di heman demê de pêdivî ye ku hûn li gorî naverokê astê roleû astê biguhezînin. aria-liveGer ew peyamek girîng e mîna xeletiyek, bikar bînin role="alert" aria-live="assertive", wekî din role="status" aria-live="polite"taybetmendiyan bikar bînin.

Ji ber ku naveroka ku hûn nîşan didin diguhezin, bê guman wextê nûve bikin da ku bikarhêner ji bo xwendina tostê wextê têr hebe delay.

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

Dema ku hûn bikar tînin autohide: false, divê hûn bişkokek nêzîk lê zêde bikin da ku bihêlin bikarhêneran tostê biavêjin.

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>

Dema ku ji hêla teknîkî ve gengaz e ku meriv kontrolên baldar/çalakbar (wekî bişkok an girêdanên din) li toastê zêde bike, divê hûn ji bo xweveşartina toastan ji kirina vê yekê dûr bisekinin. Tewra ku hûn demek dirêj dirêj bidin delaytoastê , bikarhênerên klavyeyê û teknolojiya arîkar dibe ku dijwar be ku di wextê xwe de bigihîjin toastê ku tevbigerin (ji ber ku toast dema ku têne xuyang kirin balê nagirin). Heke hûn bê guman hewce ne ku kontrolên din hebin, em pêşniyar dikin ku toastek bi autohide: false.

CSS

Variables

Di v5.2.0 de hate zêdekirin

Wekî beşek ji nêzîkbûna guhêrbarên CSS-ê yên pêşveçûyî yên Bootstrap, toast naha guhêrbarên CSS-ê yên herêmî li ser .toastji bo xwerûkirina rast-dema pêşkeftî bikar tînin. Nirxên ji bo guhêrbarên CSS bi Sass ve têne danîn, ji ber vê yekê xwerûkirina Sass hîn jî piştgirî ye.

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

Guherbarên 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);

Bikaranîna

Bi JavaScriptê toastan bidin destpêkirin:

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

Triggers

dataVeqetandin dikare bi taybetmendiya li ser bişkokek di nav toastê de ku li jêr hatî destnîşan kirin were bidestxistin :

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

an li ser bişkokek li derveyî toastêdata-bs-target wekî ku li jêr hatî destnîşan kirin bikar bînin :

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

Vebijêrk

Ji ber ku vebijark dikarin bi taybetmendiyên daneyan an JavaScriptê ve werin derbas kirin, hûn dikarin navek vebijarkê lê zêde bikin data-bs-, wekî di data-bs-animation="{value}". Dema ku vebijarkan bi taybetmendiyên daneyê re derbas bikin, pê ewle bin ku hûn celebê doza navê vebijarkê ji " camelCase " veguherînin " kebab-case ". Mînakî, data-bs-custom-class="beautifier"li şûna bikar bînin data-bs-customClass="beautifier".

Ji Bootstrap 5.2.0-ê, hemî pêkhate taybetmendiyek daneya veqetandî ya ceribandinêdata-bs-config piştgirî dikin ku dikare veavakirina hêmanek hêsan wekî rêzek JSON bihewîne. Dema ku hêmanek hebe data-bs-config='{"delay":0, "title":123}'û data-bs-title="456"taybetmendî hebe, nirxa paşîn titledê bibe 456û taybetmendiyên daneya veqetandî dê nirxên ku li ser hatine dayîn derbas bikin data-bs-config. Digel vê yekê, taybetmendiyên daneya heyî dikarin nirxên JSON ên mîna data-bs-delay='{"show":0,"hide":150}'.

Nav Awa Destçûnî Terîf
animation boolean true Veguheztina fade ya CSS-ê li toastê bicîh bikin.
autohide boolean true Piştî derengiyê bixweber toast veşêre.
delay jimare 5000 Berî veşartina tostê bi milî çirkeyan dereng bihêlin.

Methods

Rêbaz û veguherînên Asynchronous

Hemî rêbazên API-ê asynkron in û veguherînek dest pê dikin . Gava ku veguhêz dest pê kir lê berî ku biqede ew vedigerin bangkerê . Wekî din, bangek rêbazek li ser pêkhateyek veguhêz dê were paşguh kirin.

Ji bo bêtir agahdarî li belgeya meya JavaScriptê binêre .

Awa Terîf
dispose Tiştek hêmanek vedişêre. Tişta we dê li ser DOM-ê bimîne lê êdî nayê xuyang kirin.
getInstance Rêbaza statîk a ku dihêle hûn mînaka toastê ya ku bi hêmanek DOM-ê ve girêdayî ye bistînin .
Mînakî: Mînakek const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)toastek Bootstrap vedigerîne.
getOrCreateInstance Rêbaza statîkî ya ku dihêle hûn mînaka tostê ya ku bi hêmanek DOM-ê ve girêdayî ye bistînin, an jî yek nû biafirînin, heke ew nehatibe destpêkirin.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)Mînakek toastek Bootstrap vedigerîne.
hide Tiştek hêmanek vedişêre. Berî ku tost bi rastî veşêre (ango berî ku hidden.bs.toastbûyer çêbibe) vedigere bangkerê. Ger we çêkiriye divê hûn bi destan bangî vê rêbazê autohidebikin false.
isShown Li gorî rewşa dîtbarî ya toastê boolean vedigerîne.
show Tiştek hêmanek eşkere dike. Berî ku tost bi rastî were xuyang kirin (ango berî ku shown.bs.toastbûyer çêbibe) vedigere bangewazî. Pêdivî ye ku hûn bi destan bangî vê rêbazê bikin, li şûna wê tosta we nayê xuyang kirin.

Events

Bûyer Terîf
hide.bs.toast hideDema ku rêbaza nimûneyê hate gazîkirin , ev bûyer tavilê tê şewitandin .
hidden.bs.toast Dema ku tost ji bikarhênerê veşartî xilas bû ev bûyer tê şewitandin.
show.bs.toast showDema ku rêbaza nimûneyê tê gazî kirin ev bûyer tavilê dişewite.
shown.bs.toast Dema ku tost ji bikarhênerê re xuya bibe ev bûyer tê şewitandin. 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})