in English

Roodhiyo

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

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:

  • Haddii aad JavaScript-kayaga ka dhisayso isha, waxay u baahan tahayutil.js .
  • Toasts-ka waxaa lagu gatay sababo waxqabad dartood, marka waa inaad adigu bilawdaa .
  • Fadlan ogow inaad adigu masuul ka tahay meelaynta rootiga.
  • 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.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Live

Guji badhanka hoose si aad u tusto rooti rooti ah (oo ay ku yaalaan yutiilitida geeska hoose ee midig) kaas oo si toos ah loogu qariyay .hide.

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

<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Translucent

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

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Is dulsaarid

Marka aad haysato rootiyaal badan, waxaanu kuugu soo ururinay si toos ah si la akhriyi karo.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">just now</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </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 mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">2 seconds ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Heads up, toasts will stack automatically
  </div>
</div>

Meelaynta

Ku rid rooti rooti ah oo leh CSS caado ah sida aad ugu baahan tahay. Midigta sare ayaa inta badan loo isticmaalaa ogeysiisyada, si la mid ah dhexe ee 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. 
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <div class="toast" style="position: absolute; top: 0; right: 0;">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

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

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <!-- Position it -->
  <div style="position: absolute; top: 0; right: 0;">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </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 mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </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.

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="height: 200px;">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </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-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.

<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </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.

Dhaqanka JavaScript

Isticmaalka

Ku bilow rootiga JavaScript:

$('.toast').toast(option)

Ikhtiyaarada

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

Magaca Nooca Asal ahaan Sharaxaada
animation booliyan run Codso u gudbida libdhicida CSS ee rootiga
isqarxi booliyan run Si otomaatig ah u qari rootiga
dib u dhac tirada 500 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 .

$().toast(options)

Wuxuu ku lifaaqaa maamule rooti ururinta walxaha.

.toast('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.

$('#element').toast('show')

.toast('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.

$('#element').toast('hide')

.toast('dispose')

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

$('#element').toast('dispose')

Dhacdooyinka

Nooca Dhacdada Sharaxaada
tuso.bs. rooti Dhacdadani waxay isla markaaba gubataa marka showhabka tusaalaha la yiraahdo.
la tusay.bs. rooti Dhacdadan waxa la eryaa marka rootiga la arkay isticmaaluhu.
qari.bs. rooti Dhacdadan ayaa isla markaaba la eryaa marka hidehabka tusaale ahaan loo waco.
qarsoon.bs. rooti Dhacdadan waxa la eryaa marka rootigu dhammeeyo in laga qariyo isticmaalaha. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})