टोस्ट

टोस्ट, हल्के और आसानी से अनुकूलन योग्य अलर्ट संदेश के साथ अपने आगंतुकों को सूचनाएं पुश करें।

इस पृष्ठ पर

टोस्ट हल्के नोटिफिकेशन हैं जिन्हें मोबाइल और डेस्कटॉप ऑपरेटिंग सिस्टम द्वारा लोकप्रिय पुश नोटिफिकेशन की नकल करने के लिए डिज़ाइन किया गया है। वे फ्लेक्सबॉक्स के साथ बनाए गए हैं, इसलिए उन्हें संरेखित करना और स्थिति बनाना आसान है।

अवलोकन

टोस्ट प्लगइन का उपयोग करते समय जानने योग्य बातें:

प्रदर्शन कारणों से टोस्ट ऑप्ट-इन हैं, इसलिए आपको उन्हें स्वयं प्रारंभ करना होगा ।
यदि आप निर्दिष्ट नहीं करते हैं तो टोस्ट अपने आप छिप जाएंगे autohide: false।

इस घटक का एनीमेशन प्रभाव prefers-reduced-motionमीडिया क्वेरी पर निर्भर है। हमारे एक्सेसिबिलिटी डॉक्यूमेंटेशन का रिड्यूस्ड मोशन सेक्शन देखें ।

उदाहरण

बुनियादी

एक्स्टेंसिबल और प्रेडिक्टेबल टोस्ट को प्रोत्साहित करने के लिए, हम हेडर और बॉडी की सलाह देते हैं। display: flexहमारे मार्जिन और फ्लेक्सबॉक्स उपयोगिताओं के लिए धन्यवाद, टोस्ट हेडर सामग्री के आसान संरेखण की अनुमति देते हैं।

टोस्ट उतने ही लचीले होते हैं जितने की आपको आवश्यकता होती है और उनमें बहुत कम आवश्यक मार्कअप होता है। कम से कम, हमें आपकी "टोस्टेड" सामग्री को शामिल करने के लिए एक तत्व की आवश्यकता होती है और खारिज करने के बटन को दृढ़ता से प्रोत्साहित करते हैं।

नमस्ते दुनिया! यह एक टोस्ट संदेश है।

एचटीएमएल

<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()
  })
}

पारदर्शी

उनके नीचे क्या है के साथ मिश्रण करने के लिए टोस्ट थोड़ा पारभासी हैं।

नमस्ते दुनिया! यह एक टोस्ट संदेश है।

एचटीएमएल

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

स्टैकिंग

आप टोस्ट को एक टोस्ट कंटेनर में लपेटकर ढेर कर सकते हैं, जो लंबवत रूप से कुछ अंतर जोड़ देगा।

देखना? ऐसे ही।

ध्यान दें, टोस्ट अपने आप ढेर हो जाएंगे

एचटीएमएल

<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 आइकन से एक कस्टम छुपा आइकन जोड़कर , और लेआउट को समायोजित करने के लिए कुछ फ्लेक्सबॉक्स उपयोगिताओं का उपयोग करके एक सरल टोस्ट बनाया है।

नमस्ते दुनिया! यह एक टोस्ट संदेश है।

एचटीएमएल

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

वैकल्पिक रूप से, आप टोस्ट में अतिरिक्त नियंत्रण और घटक भी जोड़ सकते हैं।

नमस्ते दुनिया! यह एक टोस्ट संदेश है।

एचटीएमएल

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

नमस्ते दुनिया! यह एक टोस्ट संदेश है।

एचटीएमएल

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

प्लेसमेंट

टोस्ट को कस्टम सीएसएस के साथ रखें जैसा आपको उनकी आवश्यकता है। शीर्ष दाईं ओर अक्सर सूचनाओं के लिए उपयोग किया जाता है, जैसा कि शीर्ष मध्य है। यदि आप एक समय में केवल एक ही टोस्ट दिखाने जा रहे हैं, तो पोजिशनिंग स्टाइल को .toast.

नमस्ते दुनिया! यह एक टोस्ट संदेश है।

एचटीएमएल

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

अधिक सूचनाएं उत्पन्न करने वाले सिस्टम के लिए, एक रैपिंग तत्व का उपयोग करने पर विचार करें ताकि वे आसानी से स्टैक कर सकें।

देखना? ऐसे ही।

ध्यान दें, टोस्ट अपने आप ढेर हो जाएंगे

एचटीएमएल

<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 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, आपको उपयोगकर्ताओं को टोस्ट को खारिज करने की अनुमति देने के लिए एक क्लोज बटन जोड़ना होगा।

नमस्ते दुनिया! यह एक टोस्ट संदेश है।

एचटीएमएल

<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}"। डेटा विशेषताओं के माध्यम से विकल्पों को पास करते समय केस प्रकार के विकल्प नाम को " CamelCase " से " कबाब-केस " में बदलना सुनिश्चित करें । उदाहरण के लिए, data-bs-custom-class="beautifier"के बजाय उपयोग करें data-bs-customClass="beautifier"।

बूटस्ट्रैप 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`	टोस्ट में CSS फेड ट्रांजिशन लागू करें।
`autohide`	बूलियन	`true`	देरी के बाद स्वचालित रूप से टोस्ट छुपाएं।
`delay`	संख्या	`5000`	टोस्ट छुपाने से पहले मिलीसेकंड में देरी।

तरीकों

अतुल्यकालिक तरीके और संक्रमण

सभी एपीआई विधियाँ अतुल्यकालिक हैं और एक संक्रमण शुरू करती हैं । ट्रांज़िशन शुरू होते ही वे कॉलर के पास वापस आ जाते हैं लेकिन उसके समाप्त होने से पहले । इसके अलावा, एक संक्रमण घटक पर एक विधि कॉल को नजरअंदाज कर दिया जाएगा ।

अधिक जानकारी के लिए हमारे जावास्क्रिप्ट दस्तावेज़ देखें ।

तरीका	विवरण
`dispose`	किसी तत्व का टोस्ट छुपाता है। आपका टोस्ट DOM पर बना रहेगा लेकिन अब और नहीं दिखाई देगा।
`getInstance`	स्टेटिक विधि जो आपको डीओएम तत्व से जुड़े टोस्ट इंस्टेंस को प्राप्त करने की अनुमति देती है। उदाहरण के लिए: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)`बूटस्ट्रैप टोस्ट उदाहरण देता है।
`getOrCreateInstance`	स्टेटिक विधि जो आपको डीओएम तत्व से जुड़े टोस्ट इंस्टेंस को प्राप्त करने की अनुमति देती है, या यदि इसे प्रारंभ नहीं किया गया था, तो एक नया बनाएं। `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...
})