टोस्ट के लिये

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

इस पेज पर

टोस्ट हल्का सूचना छै जे पुश सूचनाक कें नकल करय कें लेल डिजाइन कैल गेल छै जे मोबाइल आ डेस्कटॉप ऑपरेटिंग सिस्टम द्वारा लोकप्रिय कैल गेल छै. इ फ्लेक्सबॉक्स सं बनल छै, अइ कें लेल एकरा संरेखित करनाय आ ओकरा स्थिति मे रखनाय आसान छै.

अवलोकन

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

टोस्ट प्रदर्शन कारण सं ऑप्ट-इन होइत अछि, तें, अहांकें स्वयं एकरा इनिशियलाइज करय पड़त .
जँ अहाँ निर्दिष्ट नहि करब तँ टोस्ट स्वतः नुका जायत 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 ” सं “ kabab -case ” मे बदलनाय सुनिश्चित करूं . जेना, के 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`	कोनो तत्व के टोस्ट छिपाबैत अछि। अहाँक टोस्ट डीओएम पर रहत मुदा आब नहि देखायत।
`getInstance`	स्थिर विधि जे अहां कें एकटा डोम तत्व सं जुड़ल टोस्ट इंस्टेंस प्राप्त करय कें अनुमति देयत छै. जेना: `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...
})