टोस्ट करदा ऐ

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

इस पेज पर

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

अवलोकन करना

टोस्ट प्लगइन दा इस्तेमाल करदे बेल्लै जानने आह्लियां गल्लां:

टोस्ट प्रदर्शन कारणें कन्नै ऑप्ट-इन होंदे न , इसलेई तुसेंगी अपने आपै गी शुरू करना होग .
जेकर तुस निर्दिश्ट नेईं करदे ओ तां टोस्ट अपने आप गै छुप जाङन 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 च जोड़ेआ गेआ

बूटस्ट्रैप दे विकसित CSS चर दृष्टिकोण दे हिस्से दे रूप च, टोस्ट हून .toastबधाए गेदे रियल-टाइम अनुकूलन आस्तै लोकल CSS चर पर इस्तेमाल करदे न। 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`	स्थिर विधि जेह् ड़ी तुसेंगी इक 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...
})