U gudub nuxurka muhiimka ah U gudub dukumentiyada navigation
Check
in English

Roodhiyo

Ku riix ogeysiisyada booqdayaashaada rooti rooti ah, fariin digniin ah oo fudud oo si fudud loo habeyn karo.

Boggan

Toasts waa ogeysiisyo fudud oo loogu talagalay in lagu ekaysiiyo ogaysiisyada riixitaanka ee ay shaaciyeen nidaamyada hawlgalka moobaylka iyo miiska. Waxay ku dhisan yihiin flexbox, si ay u fududaato in la isku toosiyo oo meel la dhigo.

Dulmar

Waxyaabaha ay tahay in la ogaado marka la isticmaalayo plugin toast:

  • Toasts-ka waxaa lagu gatay sababo waxqabad dartood, marka waa inaad adigu bilawdaa .
  • Toasts si toos ah ayey u qarin doontaa haddii aadan cayimin autohide: false.
Saamaynta animation ee qaybtani waxay ku xidhan tahay prefers-reduced-motionwaydiinta warbaahinta. Eeg qaybta dhaqdhaqaaqa la dhimay ee dukumeenti gelitaankeena .

Tusaalooyinka

Aasaaska

Si loo dhiirrigeliyo rootiga la fidin karo iyo kuwa la saadaalin karo, waxaan ku talineynaa madax iyo jir. Madaxyada toastada ayaa isticmaala display: flex, taasoo u oggolaanaysa in si sahlan loo waafajiyo nuxurka iyada oo ay ugu wacan tahay isticmaalkayada margin iyo flexbox.

Roodhiyadu waa kuwo dabacsan sida aad u baahan tahay waxayna leeyihiin calaamado aad u yar oo loo baahan yahay. Ugu yaraan, waxaanu u baahanahay hal shay si uu u koobo nuxurkaaga “toasted” oo aanu si adag u dhiirigelino badhanka cayrinta.

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>
Markii hore, qoraalladayadu waxay si firfircoon ugu dari jireen .hidefasalka si ay si buuxda u qariyaan rootiga (oo leh display:none, halkii ay ku koobnaan lahayd oo keliya opacity:0). Tani hadda lagama maarmaan ma aha. Si kastaba ha ahaatee, waafaqid gadaal, qoraalkayagu wuxuu sii wadi doonaa inuu beddelo fasalka (inkastoo aysan jirin baahi wax ku ool ah oo loo qabo) ilaa nooca weyn ee xiga.

Tusaale nool

Guji badhanka hoose si aad u tusto rooti rooti ah (oo lagu meeleeyay yutiilitida dhanka geeska hoose ee midig) kaas oo qarsoodi ahaan loo qariyay.

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

Waxaan isticmaalnaa JavaScript-ka soo socda si aan u kicino demo toast-ka tooska ah:

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

    toast.show()
  })
}

Translucent

Rootiyadu waxyar bay dhalaalayaan si ay ugu milmaan waxa ka hooseeya.

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>

Is dulsaarid

Waxaad ku ridi kartaa rootiga rootiga adigoo ku duubaya weel rooti ah, kaas oo si toos ah u dari doona meelo kala fogaansho ah.

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>

Waxyaabaha gaarka ah

Habee toasts-kaaga adiga oo ka saaraya qaybo-hoosaadyo, ku hagaajinayo yutiilitida , ama adoo ku daraya calaamadayntaada. Halkan waxaan ku abuurnay rooti fudud anagoo meesha ka saarnay asalka, ku darsanay summada .toast-headerqarsoon ee Bootstrap Icons , oo aan isticmaalnay qaar ka mid ah yutiilitida flexbox si loo hagaajiyo qaabka.

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>

Haddii kale, waxa kale oo aad ku dari kartaa kontaroolo dheeraad ah iyo qaybo toasts.

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>

Nidaamyada midabka

Adiga oo ka duulaya tusaalaha kore, waxaad abuuri kartaa nidaamyo midab rooti ah oo kala duwan oo leh midabkeena iyo adeegyadayada asalka ah. Halkan waxaan ku darnay .text-bg-primary, .toastka dibna waxaan ku darnay .btn-close-whitebadhankayaga dhow. Cidhifka qallafsan, waxaanu ka saarnay xadka caadiga ah ee .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>

Meelaynta

Ku rid rooti rooti ah oo leh CSS caado ah sida aad ugu baahan tahay. Midigta sare waxaa badanaa loo istcimaalaa ogeysiisyada, sida dhexda sare. Haddii aad waligaa tusinayso hal rooti markiiba, habaynta meelaynta si sax ah u dhig .toast.

Bootstrap 11 daqiiqo kahor
Hello, adduunyo! Tani waa fariin rooti ah.
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>

Nidaamyada soo saara ogeysiisyo badan, ka fiirso isticmaalka walxaha duuban si ay si sahal ah isugu dhejiyaan.

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>

Waxa kale oo aad ku heli kartaa qurux adigoo isticmaalaya flexbox utilities si aad isugu toosiso rootiga jiifka iyo/ama toosan.

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>

Helitaanka

Toasts waxaa loogu talagalay inay u noqoto carqalado yaryar oo soo booqda ama isticmaalayaashaada, si aad u caawiso kuwa leh akhristayaasha shaashadda iyo tignoolajiyada la midka ah ee caawinta, waa inaad ku duubtaa rootigaaga aria-livegobolka . Isbeddellada ku yimaadda gobollada nool (sida duritaanka/cusboonaysiinta qaybta rootiga) ayaa si toos ah loogu dhawaaqaa akhristayaasha shaashadda iyaga oo aan u baahnayn in ay dhaqaajiyaan diiradda adeegsadaha ama haddii kale ay carqaladeeyaan isticmaalaha. Intaa waxaa dheer, ku dar aria-atomic="true"si aad u hubiso in rootiga oo dhan mar walba loogu dhawaaqo halbeeg (atomic), halkii aad ku dhawaaqi lahayd waxa la bedelay (taas oo keeni karta dhibaatooyin haddii aad cusboonaysiiso qayb ka mid ah waxyaabaha rootiga, ama haddii aad soo bandhigto isla nuxurka rootiga. waqti dambe). Haddii macluumaadka loo baahan yahay ay muhiim u tahay geeddi-socodka, tusaale ahaan liiska khaladaadka qaab ahaan, ka dib isticmaal qaybta digniintahalkii rooti lagu dubay.

Ogsoonow in gobolka nooli uu u baahan yahay inuu ku jiro calaamadaynta ka hor inta aan rootiga la soo saarin ama la cusboonaysiin. Haddii aad si firfircoon u soo saarto labadaba isku mar oo aad ku durto bogga, guud ahaan laguma dhawaaqi doono tignoolajiyada caawinta.

Waxaad sidoo kale u baahan tahay inaad la qabsato heerka roleiyo aria-liveiyadoo ku xiran nuxurka. Haddii ay tahay fariin muhiim ah sida qaladka, isticmaal role="alert" aria-live="assertive", haddii kale isticmaal role="status" aria-live="polite"sifooyinka.

Sida macluumaadka aad soo bandhigaysid ay isbedelayaan, hubso inaad cusboonaysiiso wakhtiga ka delaydhamaaday si isticmaalayaashu ay u helaan wakhti ku filan oo ay ku akhriyaan rootiga.

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

Markaad isticmaalayso autohide: false, waa inaad kudartaa badhanka u dhow si aad ugu ogolaato isticmaalayaasha inay joojiyaan rootiga.

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>

Iyadoo farsamo ahaan ay suurtogal tahay in lagu daro kontaroolo la taaban karo/shaqayn karo (sida badhamada dheeraadka ah ama isku xidhka) toastkaaga, waa inaad ka fogaataa inaad tan si otomaatig ah u qariso rootiga. Xitaa haddii aad siiso rootiga delaywaqti dheer , kiiboodhka iyo isticmaalayaasha tignoolajiyada caawinta ayaa laga yaabaa inay ku adkaato inay gaadhaan rootiga wakhtiga si ay tallaabo u qaadaan (maadaama rootigu aanu helin diiradda marka la soo bandhigo). Haddi ay qasab tahay in aad leedahay kontaroolo dheeraad ah, waxa aanu kugula talinaynaa in aad isticmaasho rootiga autohide: false.

CSS

Kala duwanaansho

Lagu daray v5.2.0

Iyada oo qayb ka ah habka doorsoomayaasha CSS ee Bootstrap, rootiga ayaa hadda adeegsada doorsoomayaasha CSS-ta maxalliga ah .toastsi loo hagaajiyo habeynta waqtiga-dhabta ah. Qiimaha doorsoomayaasha CSS waxa lagu dejiyay Sass, sidaa darteed habaynta Sass wali waa la taageerayaa, sidoo kale.

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

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

Isticmaalka

Ku bilow rootiga JavaScript:

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

Kiciyeyaasha

Cayrinta waxaa lagu gaari karaa datasifada ku taal badhan ku dhex jira rootiga sida hoos ku cad:

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

ama badhan ka baxsan rootiga adigoo isticmaalaya data-bs-targetsida hoos ku cad:

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

Ikhtiyaarada

Sida xulashooyinka loogu gudbi karo sifooyinka xogta ama JavaScript, waxaad ku dari kartaa magaca ikhtiyaarka ah data-bs-, sida ku jira data-bs-animation="{value}". Hubi inaad ka beddesho nooca kiis ee magaca ikhtiyaarka " camelCase " una beddelo " kebab-case " markaad ikhtiyaarka ku gudbinayso sifooyinka xogta. Tusaale ahaan, isticmaal data-bs-custom-class="beautifier"bedelkii data-bs-customClass="beautifier".

Marka la eego Bootstrap 5.2.0, dhammaan qaybaha waxay taageeraan sifada xogta kaydsan ee tijaabadadata-bs-config ah taas oo u dejin karta qaabaynta qaybaha fudud sida xadhig JSON ah. Marka curiye leeyahay data-bs-config='{"delay":0, "title":123}'iyo data-bs-title="456"sifooyin, titleqiimaha kama dambaysta ahi waxa uu ahaan doonaa 456sifada xogta goonida ahina waxa ay meesha ka saari doontaa qiyamka lagu bixiyo data-bs-config. Intaa waxaa dheer, sifada xogta hadda jirta waxay awood u leedahay inay ku noolaato qiyamka JSON sida data-bs-delay='{"show":0,"hide":150}'.

Magaca Nooca Asal ahaan Sharaxaada
animation booliyan true Codso u gudbida libdhicida CSS ee rootiga
autohide booliyan true Si toos ah u qari rootiga daahitaanka ka dib.
delay tirada 5000 Dib u dhig millise seconds ka hor inta aanad qarin rootiga.

Hababka

Hababka iyo kala-guurka aan isku midka ahayn

Dhammaan hababka API waa isku mid waxayna bilaabaan kala-guurka . Waxay ku soo noqdaan qofka soo wacaya isla markii uu bilaabmo kala-guurka laakiin ka hor inta uusan dhammaan . Intaa waxaa dheer, hab ku baaqaya in qayb ka beddelka waa la iska indhatiray .

Ka eeg dukumeentiyada JavaScript wixii macluumaad dheeraad ah .

Habka Sharaxaada
dispose Waxay qarisaa rootiga curiyaha Rootigaagu wuxuu ku sii jirayaa DOM laakiin mar dambe ma muujin doono.
getInstance Habka taagan kaas oo kuu ogolaanaya inaad hesho tusaalaha rootiga ee la xidhiidha walxaha DOM.
Tusaale ahaan: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)Wuxuu soo celiyaa tusaale rootiga Bootstrap.
getOrCreateInstance Habka taagan kaas oo kuu ogolaanaya inaad hesho tusaalaha rootiga ee la xidhiidha walxaha DOM, ama abuurto mid cusub, haddii aan la bilaabin.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)Soo celisa tusaale rootiga Bootstrap.
hide Waxay qarisaa rootiga curiyaha Ku soo noqoshada soo wacaha ka hor inta aan rootiga la qarinin (tusaale ka hor inta aysan hidden.bs.toastdhacdada dhicin). Waa inaad gacanta ku wacdaa habkan haddii aad autohidesamaysay false.
isShown Soo celisa boolean iyadoo loo eegayo heerka muuqaalka toastada.
show Waxay daaha ka qaadaysaa rootiga curiyaha Ku soo noqoshada soo wacaha ka hor inta aan rootiga la tusin (tusaale ka hor inta aysan shown.bs.toastdhacdada dhicin). Waa inaad gacanta ku wacdaa habkan, beddelka rootigaagu ma muujin doono.

Dhacdooyinka

Dhacdo Sharaxaada
hide.bs.toast Dhacdadan ayaa isla markaaba la eryaa marka hidehabka tusaale ahaan loo waco.
hidden.bs.toast Dhacdadan waxa la eryaa marka rootigu dhammeeyo in laga qariyo isticmaalaha.
show.bs.toast Dhacdadani waxay isla markaaba gubataa marka showhabka tusaalaha la yiraahdo.
shown.bs.toast Dhacdadan waxa la eryaa marka rootiga la arkay isticmaaluhu. 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})