ٽوسٽ

پش نوٽيفڪيشن توهان جي سياحن کي ٽوسٽ سان، هڪ ہلڪو وزن ۽ آساني سان حسب ضرورت خبرداري پيغام سان.

هن صفحي تي

Toasts ہلڪي وزن وارا اطلاع آھن جيڪي پش نوٽيفڪيشن کي نقل ڪرڻ لاءِ ٺاھيا ويا آھن جيڪي موبائل ۽ ڊيسڪ ٽاپ آپريٽنگ سسٽم پاران مشهور ڪيا ويا آھن. اهي flexbox سان ٺهيل آهن، تنهنڪري اهي ترتيب ڏيڻ ۽ پوزيشن ۾ آسان آهن.

اوسر

ٽوسٽ پلگ ان استعمال ڪرڻ وقت ڄاڻڻ جون شيون:

Toasts آپٽ ان ڪارڪردگي سببن لاءِ آھن، تنھنڪري توھان کي انھن کي پاڻ شروع ڪرڻ گھرجي .
ٽوسٽ پاڻمرادو لڪائي ڇڏيندو جيڪڏھن توھان وضاحت نه ڪندا autohide: false.

ھن جزو جي متحرڪ اثر prefers-reduced-motionميڊيا جي سوال تي منحصر آھي. اسان جي پهچ واري دستاويزن جو گھٽ موشن سيڪشن ڏسو .

مثال

بنيادي

توسيع ۽ پيش گوئي واري ٽوسٽ جي حوصلا افزائي ڪرڻ لاءِ، اسان سفارش ڪريون ٿا هيڊر ۽ جسم. ٽوسٽ هيڊر استعمال ڪن ٿا display: flex، اسان جي مارجن ۽ فليڪس باڪس يوٽيلٽيز جي مهرباني مواد جي آسان ترتيب ڏيڻ جي اجازت ڏئي ٿي.

Toasts لچڪدار آهن جيئن توهان جي ضرورت آهي ۽ تمام گهٽ گهربل مارڪ اپ آهي. گھٽ ۾ گھٽ، اسان کي ھڪڙي عنصر جي ضرورت آھي توھان جي "ٽوسٽ ٿيل" مواد تي مشتمل آھي ۽ ھڪڙي برطرفي واري بٽڻ کي مضبوطيء سان حوصلا افزائي ڪريون.

هيلو، دنيا! هي هڪ ٽوسٽ پيغام آهي.

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). اهو هاڻي ضروري ناهي. جڏهن ته، پسمانده مطابقت لاءِ، اسان جو اسڪرپٽ ڪلاس کي ٽوگل ڪرڻ جاري رکندو (جيتوڻيڪ ان جي ڪا عملي ضرورت نه آهي) ايندڙ وڏي ورزن تائين.

زنده مثال

ٽوسٽ ڏيکارڻ لاءِ ھيٺ ڏنل بٽڻ تي ڪلڪ ڪريو (ھيٺئين ساڄي ڪنڊ ۾ اسان جي يوٽيلٽيز سان گڏ) جيڪو ڊفالٽ طور لڪايو ويو آھي.

Hello, world! This is a toast message.

<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 اسٽريپ آئڪن مان ڪسٽم هائيڊ آئڪن شامل ڪندي، ۽ لي آئوٽ کي ترتيب ڏيڻ لاءِ ڪجهه فليڪس باڪس يوٽيلٽيز استعمال ڪندي.

هيلو، دنيا! هي هڪ ٽوسٽ پيغام آهي.

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.

هيلو، دنيا! هي هڪ ٽوسٽ پيغام آهي.

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>

توهان پڻ فينسي حاصل ڪري سگهو ٿا flexbox افاديت سان ٽوسٽ کي افقي ۽ / يا عمودي طور تي ترتيب ڏيڻ لاءِ.

هيلو، دنيا! هي هڪ ٽوسٽ پيغام آهي.

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>

پهچ

Toasts جو مقصد توھان جي سياحن يا استعمال ڪندڙن لاءِ ننڍڙيون رڪاوٽون آھن، تنھنڪري انھن جي مدد ڪرڻ لاءِ جن کي اسڪرين ريڊرز ۽ ساڳيا مددگار ٽيڪنالاجيون آھن، توھان کي پنھنجي ٽوسٽ کي ھڪڙي 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.

سي ايس ايس

متغير

v5.2.0 ۾ شامل ڪيو ويو

بوٽ اسٽريپ جي ترقي ڪندڙ سي ايس ايس متغير جي انداز جي حصي جي طور تي، ٽوسٽ هاڻي مقامي سي ايس ايس متغير استعمال ڪن ٿا .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}". ڊيٽا جي خاصيتن ذريعي اختيارن کي پاس ڪرڻ وقت اختياري جي صورت واري قسم کي تبديل ڪرڻ جي پڪ ڪريو ”ڪيم ڪيس“ مان ” ڪباب ڪيس “. مثال طور، 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`	بولين	`true`	ٽوسٽ تي سي ايس ايس فيڊ ٽرانسشن لاڳو ڪريو.
`autohide`	بولين	`true`	دير کان پوء خودڪار طور تي ٽوسٽ لڪايو.
`delay`	نمبر	`5000`	ٽوسٽ کي لڪائڻ کان اڳ ملي سيڪنڊن ۾ دير ڪريو.

طريقا

هم وقت سازي طريقا ۽ منتقلي

سڀ API طريقا غير مطابقت رکندڙ آهن ۽ هڪ منتقلي شروع ڪن ٿا . اهي ڪالر ڏانهن موٽندا آهن جيئن ئي منتقلي شروع ٿئي ٿي پر ان کان اڳ ختم ٿي وڃي . ان کان علاوه، هڪ طريقو ڪال هڪ منتقلي جزو تي نظر انداز ڪيو ويندو .

وڌيڪ معلومات لاءِ اسان جا JavaScript دستاويز ڏسو .

طريقو	وصف
`dispose`	هڪ عنصر جي ٽوسٽ کي لڪائيندو آهي. توھان جو ٽوسٽ ڊوم تي رھندو پر وڌيڪ نه ڏيکاريندو.
`getInstance`	جامد طريقو جيڪو توهان کي DOM عنصر سان لاڳاپيل ٽوسٽ مثال حاصل ڪرڻ جي اجازت ڏئي ٿو. مثال طور: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)`بوٽ اسٽريپ ٽوسٽ مثال ڏي ٿو.
`getOrCreateInstance`	جامد طريقو جيڪو توهان کي DOM عنصر سان لاڳاپيل ٽوسٽ مثال حاصل ڪرڻ جي اجازت ڏئي ٿو، يا هڪ نئون ٺاهيو، ان صورت ۾ ان جي شروعات نه ڪئي وئي هئي. `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)`بوٽ اسٽريپ ٽوسٽ جو مثال ڏئي ٿو.
`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...
})