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.

Hello, adduunyo! Tani waa fariin rooti ah.

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

Hello, world! This is a toast message.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
  <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:

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

    toast.show()
  })
}

Translucent

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

Hello, adduunyo! Tani waa fariin rooti ah.

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

Bal eeg? Sidan oo kale.

Madaxa kor u kaca, rootiga rootiga ayaa si toos ah u soo uruurin doona

<div class="toast-container">
  <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.

Hello, adduunyo! Tani waa fariin rooti ah.

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

Hello, adduunyo! Tani waa fariin rooti ah.

<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 .bg-primaryoo .text-whiteku darnay .toast, ka dibna ku darnay .btn-close-whitebadhankayaga dhow. Cidhifka qallafsan, waxaanu ka saarnay xadka caadiga ah ee .border-0.

Hello, adduunyo! Tani waa fariin rooti ah.

<div class="toast align-items-center text-white 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.

Hello, adduunyo! Tani waa fariin rooti ah.

<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 position-absolute 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.

Bal eeg? Sidan oo kale.

Madaxa kor u kaca, rootiga rootiga ayaa si toos ah u soo uruurin doona

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `.position-absolute`, `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 position-absolute 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.

Hello, adduunyo! Tani waa fariin rooti ah.

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

Hello, adduunyo! Tani waa fariin rooti ah.

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

Sass

Kala duwanaansho

$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:                1px;
$toast-border-color:                rgba($black, .1);
$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:

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return 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

Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-bs-, sida ku jira data-bs-animation="".

Magaca	Nooca	Asal ahaan	Sharaxaada
`animation`	booliyan	`true`	Codso u gudbida libdhicida CSS ee rootiga
`autohide`	booliyan	`true`	Si otomaatig ah u qari rootiga
`delay`	tirada	`5000`	Dib u dhig qarinta rootiga (ms)

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 .

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.

toast.show()

qari

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.

toast.hide()

tuurid

Waxay qarisaa rootiga curiyaha Rootigaagu wuxuu ku sii jirayaa DOM laakiin mar dambe ma muujin doono.

toast.dispose()

heliTusaale

Habka taagan kaas oo kuu ogolaanaya inaad hesho tusaalaha rootiga ee la xidhiidha walxaha DOM

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance

HelOrCreateInstance

Habka taagan kaas oo kuu ogolaanaya inaad hesho tusaalaha rootiga ee la xidhiidha walxaha DOM, ama abuurto mid cusub haddii aan la bilaabin

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance

Dhacdooyinka

Nooca dhacdada	Sharaxaada
`show.bs.toast`	Dhacdadani waxay isla markaaba gubataa marka `show`habka tusaalaha la yiraahdo.
`shown.bs.toast`	Dhacdadan waxa la eryaa marka rootiga la arkay isticmaaluhu.
`hide.bs.toast`	Dhacdadan ayaa isla markaaba la eryaa marka `hide`habka tusaale ahaan loo waco.
`hidden.bs.toast`	Dhacdadan waxa la eryaa marka rootigu dhammeeyo in laga qariyo isticmaalaha.

var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
})