टोस्ट कइल जाला

टोस्ट, हल्का आ आसानी से अनुकूलन योग्य अलर्ट संदेश के साथ अपना विजिटर लोग के सूचना के धक्का दीं।

एह पन्ना पर दिहल गइल बा

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

अवलोकन कइल जाव

टोस्ट प्लगइन के इस्तेमाल करत घरी जानल जरूरी चीज:

टोस्ट प्रदर्शन के कारण ऑप्ट-इन होला, एहसे रउआ खुद एकरा के इनिशियलाइज करे के होई .
अगर रउआ निर्दिष्ट ना करब त टोस्ट अपने आप छिप जाई 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`	टोस्ट पर एगो सीएसएस फेड संक्रमण लागू करीं।
`autohide`	बूलियन के बा	`true`	देरी के बाद टोस्ट के स्वचालित रूप से छिपा लीं।
`delay`	संख्या	`5000`	टोस्ट के छिपावे से पहिले मिलीसेकंड में देरी करीं।

विधियन के बारे में बतावल गइल बा

एसिंक्रोनस तरीका आ संक्रमण के बारे में बतावल गइल बा

सभ एपीआई विधि एसिंक्रोनस होला आ एगो संक्रमण शुरू होला . संक्रमण शुरू होते ही उ लोग फोन करे वाला के पास वापस आ जाला लेकिन खतम होखे से पहिले . एकरा अलावा, एगो संक्रमण घटक पर एगो मेथड कॉल के अनदेखी कइल जाई .

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

विधि	बिबरन
`dispose`	कवनो तत्व के टोस्ट के छिपा देला। राउर टोस्ट डीओएम पर रही बाकिर अब ना लउकी.
`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...
})