باز بدە بۆ ناوەڕۆکی سەرەکی باز بدە بۆ گەشتکردن بە دۆکیومێنتەکان
Check
in English

نانی بەیانی

پاڵ بە ئاگادارکردنەوەکانەوە بنێ بۆ سەردانکەرەکانت بە نانی بەیانی، پەیامێکی ئاگادارکردنەوە کە کێشی سووک و بە ئاسانی دەتوانرێت خۆکارانە دابنرێت.

لەم پەیجەدا

تۆستەکان ئاگادارکردنەوەیەکی سووکە کە بۆ تقلیدکردنی ئاگادارکردنەوەکانی پاڵنەر دروستکراون کە لەلایەن سیستەمی کارپێکردنی مۆبایل و مێزەوە بەناوبانگ بوون. بە فلیکس بۆکس دروستکراون، بۆیە ڕێکخستن و جێگیرکردنیان ئاسانە.

تێڕوانینێکی گشتی

ئەو شتانەی کە پێویستە بزانیت لەکاتی بەکارهێنانی پێوەکراوەکەی تۆست:

  • تۆستەکان بەهۆی کاراییەوە بەشداریکردنە، بۆیە دەبێت خۆت سەرەتایییان بکەیت .
  • تۆستەکان بە شێوەیەکی ئۆتۆماتیکی دەشارنەوە ئەگەر دیاری نەکەیت autohide: false.
کاریگەری ئەنیمەیشنی ئەم پێکهاتەیە وابەستەی prefers-reduced-motionپرسیاری میدیایە. سەیری بەشی جووڵەی کەمکراوە بکە لە بەڵگەنامەکانی دەستڕاگەیشتنمان .

نموونە

بنەڕەتی

بۆ هاندانی نانی بەیانی فراوان و پێشبینیکراو، پێشنیاری سەر و جەستە دەکەین. سەردێڕەکانی تۆست بەکاردەهێنن display: flex, ڕێگە بە ڕێکخستنی ئاسانی ناوەڕۆک دەدات بەهۆی سوودمەندییەکانی پەراوێز و فلیکسبۆکسمان.

تۆستەکان بەقەد پێویستت نەرم و نیان و مارکاپێکی زۆر کەمی پێویستیان هەیە. بەلایەنی کەمەوە، ئێمە پێویستمان بە یەک توخم هەیە کە ناوەڕۆکی "برژاو"ی تۆ لەخۆبگرێت و بە توندی هاندەری دوگمەی دەرکردنە.

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>
پێشتر، سکریپتەکانمان بە شێوەیەکی داینامیکی .hideپۆلەکەیان زیاد دەکرد بۆ ئەوەی بە تەواوی نانی بەیانی بشارنەوە (بە display:none, نەک تەنها لەگەڵ opacity:0). ئێستا ئیتر ئەمە پێویست نییە. بەڵام بۆ گونجانی پاشەکشە، سکریپتەکەمان بەردەوام دەبێت لە گۆڕینی پۆلەکە (هەرچەندە پێویستییەکی پراکتیکی پێی نییە) تا وەشانی سەرەکی داهاتوو.

نموونەی ڕاستەوخۆ

کلیک لەسەر دوگمەی خوارەوە بکە بۆ پیشاندانی تۆستێک (کە بە خزمەتگوزارییەکانمان لە گۆشەی خوارەوەی لای ڕاستدا دانراوە) کە بە شێوەی دیفۆڵت شاراوەتەوە.

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

ئێمە ئەم جاڤاسکڕێپتەی خوارەوە بەکاردەهێنین بۆ دەستپێکردنی دیمۆی تۆستی ڕاستەوخۆمان:

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

    toast.show()
  })
}

نیمچە ڕووناک

تۆستەکان کەمێک نیمچە ڕووناکن بۆ ئەوەی لەگەڵ ئەوەی لە خوارەوەیان هەیە تێکەڵ ببن.

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>

کۆکردنەوە

دەتوانیت تۆستەکان لەسەر یەک کۆ بکەیتەوە بە پێچانی لەناو دەفرێکی تۆستدا، کە بە شێوەیەکی ڕاست هەندێک دووری بۆ زیاد دەکات.

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>

ناوەڕۆکی تایبەت بەخۆت

تۆستەکانت بەپێی خواستی خۆت دروست بکە بە لابردنی پێکهاتە لاوەکییەکان، تویککردنیان بە سوودمەندییەکان , یان بە زیادکردنی مارکاپی تایبەت بە خۆت. لێرەدا ئێمە تۆستێکی سادەترمان دروست کردووە بە لابردنی پێشوەختە .toast-header, زیادکردنی ئایکۆنی شاردنەوەی تایبەت لە Bootstrap Icons , و بەکارهێنانی هەندێک سوودمەندی flexbox بۆ ڕێکخستنی نەخشەکە.

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>

یان دەتوانیت کۆنتڕۆڵ و پێکهاتەی زیادە بۆ تۆستەکان زیاد بکەیت.

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>

ڕەنگەکانی ڕەنگەکان

بە پشتبەستن بەم نموونەیەی سەرەوە، دەتوانیت بە سوودمەندییەکانی ڕەنگ و پاشبنەمای ئێمە ڕەنگی جیاوازی تۆست دروست بکەیت . لێرەدا زیادمان کردووە .text-bg-primaryبۆ .toast, و پاشان زیادمان کردووە .btn-close-whiteبۆ دوگمەی داخستنیمان. بۆ لێوارێکی ورد، ئێمە سنووری پێشوەختە بە .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>

جێگیرکردن

تۆستەکان بە CSS تایبەتمەند دابنێ بەپێی پێویستت. زۆرجار لای ڕاستی سەرەوە بۆ ئاگادارکردنەوە بەکاردێت، هەروەها ناوەڕاستی سەرەوە. ئەگەر هەرگیز بڕیارە لە یەک کاتدا یەک تۆست پیشان بدەیت، شێوازەکانی جێگیرکردن ڕاست لەسەر .toast.

بووتستراپ 11 خولەک پێش ئێستا
سڵاو جیهان! ئەمە پەیامێکی تۆستە.
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>

بۆ ئەو سیستەمەی کە ئاگادارکردنەوەی زیاتر دروست دەکەن، بیر لە بەکارهێنانی توخمێکی پێچان بکەرەوە تا بتوانن بە ئاسانی لەسەر یەک کۆببنەوە.

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>

هەروەها دەتوانیت بە سوودمەندییەکانی فلێکسبۆکس فەنتازی بەدەست بهێنیت بۆ ڕێکخستنی نانی برژاوەکان بە شێوەی ئاسۆیی و/یان ڕاست.

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>

دەستڕاگەیشتن

تۆستەکان بۆ ئەوەن کە پچڕانێکی بچووک بن بۆ سەردانکەران یان بەکارهێنەرانتان، بۆیە بۆ یارمەتیدانی ئەوانەی کە خوێنەری شاشە و تەکنەلۆژیای یارمەتیدەری هاوشێوەیان هەیە، پێویستە تۆستەکانتان لە aria-liveناوچەیەکدا بپێچنەوە . گۆڕانکارییەکان لە ناوچە زیندووەکان (وەک دەرزی لێدان/نوێکردنەوەی پێکهاتەی تۆست) بە شێوەیەکی ئۆتۆماتیکی لەلایەن خوێنەری شاشەکانەوە ڕادەگەیەنرێت بەبێ ئەوەی پێویست بکات فۆکۆسی بەکارهێنەر بجوڵێنرێت یان بە شێوەیەکی تر بەکارهێنەر ببڕێت. سەرەڕای ئەوە، لەخۆ بگرە aria-atomic="true"بۆ دڵنیابوون لەوەی کە تەواوی تۆستەکە هەمیشە وەک یەک یەکە (ئەتۆمی) ڕادەگەیەنرێت، نەک تەنها ڕابگەیەنیت کە چی گۆڕاوە (کە دەتوانێت ببێتە هۆی کێشە ئەگەر تەنها بەشێک لە ناوەڕۆکی نانی بەیانی نوێ بکەیتەوە، یان ئەگەر هەمان ناوەڕۆکی نانی بەیانی پیشان بدەیت لە خاڵێکی دواتردا). ئەگەر زانیارییە پێویستەکان گرنگن بۆ پرۆسەکە، بۆ نموونە بۆ لیستی هەڵەکان لە فۆڕمێکدا، ئەوا پێکهاتەی ئاگادارکردنەوە بەکاربهێنەلەبری نانی برژاو.

تێبینی بکە کە ناوچەی ڕاستەوخۆ پێویستە لە مارکاپەکەدا ئامادە بێت پێش ئەوەی تۆستەکە دروست بکرێت یان نوێ بکرێتەوە. ئەگەر بە شێوەیەکی داینامیکی هەردووکیان لە یەک کاتدا دروست بکەیت و بیانخەیتە ناو لاپەڕەکەوە، بەگشتی لەلایەن تەکنەلۆژیا یارمەتیدەرەکانەوە ڕاناگەیەنرێن.

هەروەها پێویستە ئاستی roleو aria-liveبەپێی ناوەڕۆکەکە بگونجێنی. ئەگەر پەیامێکی گرنگە وەک هەڵەیەک، بەکاربهێنە role="alert" aria-live="assertive", ئەگەرنا role="status" aria-live="polite"تایبەتمەندیەکان بەکاربهێنە.

لەگەڵ گۆڕانی ئەو ناوەڕۆکەی کە پیشانی دەدەیت، دڵنیابە کە 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>

لەکاتی بەکارهێنانی autohide: false, پێویستە دوگمەی داخستنی زیاد بکەیت بۆ ئەوەی بەکارهێنەران بتوانن تۆستەکە لەکاربخەن.

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>

لە کاتێکدا لە ڕووی تەکنیکییەوە دەتوانرێت کۆنتڕۆڵی فۆکەس/کردار (وەک دوگمەی زیادە یان بەستەری) لە تۆستەکەتدا زیاد بکەیت، پێویستە خۆت بەدوور بگرێت لە ئەنجامدانی ئەم کارە بۆ تۆستەکانی شاردنەوەی ئۆتۆماتیکی. تەنانەت ئەگەر تۆستەکە کاتێکی درێژ بدەیت delay, بەکارهێنەرانی کیبۆرد و تەکنەلۆژیای یارمەتیدەر لەوانەیە بەزەحمەت بگەنە تۆستەکە لە کاتی خۆیدا بۆ ئەوەی هەنگاو بنێن (لەبەرئەوەی تۆستەکان فۆکەس وەرناگرن کاتێک پیشان دەدرێن). ئەگەر بە تەواوی دەبێت کۆنترۆڵی زیاترت هەبێت، پێشنیار دەکەین تۆستێک بەکاربهێنیت لەگەڵ autohide: false.

CSS

گۆڕاوەکان

لە v5.2.0 زیاد کراوە

وەک بەشێک لە نزیکبوونەوەی گۆڕاوە CSS ی پەرەسەندوو لە Bootstrap، ئێستا تۆستەکان گۆڕاوە ناوخۆییەکانی CSS بەکاردەهێنن لەسەر .toastبۆ باشترکردنی خۆکارکردنی کاتی ڕاستەقینە. بەهاکان بۆ گۆڕاوەکانی CSS لە ڕێگەی Sass دادەنرێت، بۆیە هێشتا پشتگیری لە خۆکارکردنی Sass دەکرێت، هەروەها.

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

گۆڕاوەکانی ساس

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

بەکارهێنان

دەستپێکردنی نانی بەیانی لە ڕێگەی جاڤاسکڕێپتەوە:

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

دەستپێکەرەکان

دەتوانرێت دەرکردن بە dataتایبەتمەندی لەسەر دوگمەیەک لەناو نانی برژاوەکەدا بەدەست بهێنرێت وەک لە خوارەوە نیشان دراوە:

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

یان لەسەر دوگمەیەک لە دەرەوەی نانی برژاوەکە بە بەکارهێنانی data-bs-targetوەک لە خوارەوە نیشان دراوە:

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

بژاردەکان

بەو پێیەی دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت، دەتوانیت ناوی هەڵبژاردنێک زیاد بکەیت بۆ data-bs-, وەک لە data-bs-animation="{value}". دڵنیابە لە گۆڕینی جۆری کەیسی ناوی هەڵبژاردنەکە لە “ camelCase ” بۆ “ kebab-case ” لە کاتی تێپەڕاندنی هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا. بۆ نموونە data-bs-custom-class="beautifier"لەبری data-bs-customClass="beautifier".

لە Bootstrap 5.2.0 ەوە، هەموو پێکهاتەکان پشتگیری لە تایبەتمەندییەکی داتا یەدەگی تاقیکاریdata-bs-config دەکەن کە دەتوانێت ڕێکخستنی پێکهاتەی سادە وەک ڕستەیەکی JSON لەخۆبگرێت. کاتێک توخمێک تایبەتمەندی data-bs-config='{"delay":0, "title":123}'و data-bs-title="456"تایبەتمەندیەکانی هەیە، titleبەهای کۆتایی دەبێت 456و تایبەتمەندییە جیاوازەکانی داتا بەهاکان دەگۆڕن کە لە data-bs-config. سەرەڕای ئەوە، تایبەتمەندییە داتاکانی ئێستا دەتوانن بەهاکانی JSON وەک data-bs-delay='{"show":0,"hide":150}'.

ناو جۆر بنەڕەتی وەسف
animation boolean true گواستنەوەی کاڵبوونەوەی CSS بۆ تۆستەکە بەکاربهێنە.
autohide boolean true دوای دواکەوتنەکە بە شێوەیەکی ئۆتۆماتیکی تۆستەکە بشارەوە.
delay ژماره‌ 5000 دواکەوتن بە چەند میلی چرکەیەک پێش شاردنەوەی نانی بەیانی.

شێوازەکان

شێواز و گواستنەوە ناهاوسەنگەکان

هەموو شێوازەکانی API ناهاوسەنگن و دەست بە گواستنەوە دەکەن . هەر کە گواستنەوەکە دەستی پێکرد بەڵام پێش ئەوەی کۆتایی بێت دەگەڕێنەوە لای پەیوەندیکەرەکە . سەرەڕای ئەوە، بانگەوازێکی شێواز لەسەر پێکهاتەیەکی گواستنەوە پشتگوێ دەخرێت .

بۆ زانیاری زیاتر سەیری بەڵگەنامەکانی جاڤاسکڕێپت بکە .

ڕێگا وەسف
dispose تۆستی توخمێک دەشارێتەوە. تۆستەکەت لەسەر DOM دەمێنێتەوە بەڵام ئیتر نیشان نادات.
getInstance شێوازی ئیستاتیک کە ڕێگەت پێدەدات نموونەی تۆست بەدەست بهێنیت کە پەیوەندی بە توخمێکی DOMەوە هەیە.
بۆ نموونە: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)نموونەی تۆستی Bootstrap دەگەڕێنێتەوە.
getOrCreateInstance شێوازی ئیستاتیک کە ڕێگەت پێدەدات نموونەی تۆستەکە بەدەستبهێنیت کە پەیوەندی بە توخمێکی DOMەوە هەیە، یان یەکێکی نوێ دروست بکەیت، لە ئەگەری دەستپێنەکردندا.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)نموونەیەکی تۆستی Bootstrap دەگەڕێنێتەوە.
hide تۆستی توخمێک دەشارێتەوە. پێش ئەوەی نانی بەیانی لە ڕاستیدا بشاردرێتەوە (واتە پێش ئەوەی hidden.bs.toastڕووداوەکە ڕووبدات) دەگەڕێتەوە بۆ پەیوەندیکەر. دەبێت بە دەست بانگی ئەم شێوازە بکەیت ئەگەر کردت autohideبە false.
isShown بولییەک دەگەڕێنێتەوە بەپێی دۆخی بینینی تۆست.
show تۆستی توخمێک ئاشکرا دەکات. پێش ئەوەی تۆستەکە بەڕاستی پیشان بدرێت (واتە پێش ئەوەی shown.bs.toastڕووداوەکە ڕووبدات) دەگەڕێتەوە بۆ پەیوەندیکەر. دەبێت بە دەست بانگی ئەم شێوازە بکەیت، لەبری ئەوە تۆستەکەت نیشان نادات.

ڕووداوەکان

پێشهات وەسف
hide.bs.toast ئەم ڕووداوە دەستبەجێ ئاگر دەکرێتەوە کاتێک hideشێوازی نموونە بانگ کراوە.
hidden.bs.toast ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە تۆستەکە تەواو بوو لە شاردنەوەی لە بەکارهێنەر.
show.bs.toast ئەم ڕووداوە دەستبەجێ ئاگر دەبێتەوە کاتێک showشێوازی نموونە بانگ دەکرێت.
shown.bs.toast ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە تۆستەکە بۆ بەکارهێنەر دیار بێت. 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})