टोस्ट

आपल्या अभ्यागतांना टोस्ट, हलके आणि सहज सानुकूल करण्यायोग्य अलर्ट संदेशासह सूचना पुश करा.

या पृष्ठावर

टोस्ट्स या मोबाइल आणि डेस्कटॉप ऑपरेटिंग सिस्टमद्वारे लोकप्रिय झालेल्या पुश नोटिफिकेशन्सची नक्कल करण्यासाठी डिझाइन केलेल्या हलक्या वजनाच्या सूचना आहेत. ते flexbox सह तयार केले आहेत, त्यामुळे ते संरेखित आणि स्थितीत सोपे आहेत.

आढावा

टोस्ट प्लगइन वापरताना जाणून घ्यायच्या गोष्टी:

कार्यप्रदर्शन कारणांसाठी टोस्ट्स निवडले जातात, म्हणून तुम्ही ते स्वतःच सुरू केले पाहिजेत .
आपण निर्दिष्ट न केल्यास टोस्ट आपोआप लपतील autohide: false.

या घटकाचा अॅनिमेशन प्रभाव prefers-reduced-motionमीडिया क्वेरीवर अवलंबून असतो. आमच्या प्रवेशयोग्यता दस्तऐवजीकरणाचा कमी गती विभाग पहा .

उदाहरणे

बेसिक

विस्तारण्यायोग्य आणि अंदाज करण्यायोग्य टोस्टला प्रोत्साहन देण्यासाठी, आम्ही हेडर आणि बॉडीची शिफारस करतो. display: flexआमच्या मार्जिन आणि फ्लेक्सबॉक्स युटिलिटीजमुळे सामग्रीचे सहज संरेखन करण्यास अनुमती देऊन टोस्ट शीर्षलेख वापरतात .

टोस्ट्स आपल्याला आवश्यक तितके लवचिक आहेत आणि आवश्यक मार्कअप फारच कमी आहेत. कमीतकमी, आम्हाला तुमची "टोस्ट केलेली" सामग्री समाविष्ट करण्यासाठी आणि डिसमिस बटणाला जोरदार प्रोत्साहन देण्यासाठी एक घटक आवश्यक आहे.

नमस्कार, जग! हा टोस्ट संदेश आहे.

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>

आमचा थेट टोस्ट डेमो ट्रिगर करण्यासाठी आम्ही खालील JavaScript वापरतो:

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>

टोस्ट्स क्षैतिज आणि/किंवा अनुलंब संरेखित करण्यासाठी तुम्ही फ्लेक्सबॉक्स युटिलिटीजसह फॅन्सी देखील मिळवू शकता.

नमस्कार, जग! हा टोस्ट संदेश आहे.

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>

प्रवेशयोग्यता

टोस्ट्स हे तुमच्या अभ्यागतांना किंवा वापरकर्त्यांना लहान व्यत्यय आणण्याच्या उद्देशाने आहेत, त्यामुळे स्क्रीन रीडर आणि तत्सम सहाय्यक तंत्रज्ञान असलेल्यांना मदत करण्यासाठी, तुम्ही तुमचे टोस्ट एखाद्या 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.

CSS

चल

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

Sass चल

$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);

वापर

JavaScript द्वारे टोस्ट सुरू करा:

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-पर्याय डेटा विशेषता किंवा JavaScript द्वारे पास केले जाऊ शकतात म्हणून, तुम्ही मध्ये पर्याय नाव जोडू शकता data-bs-animation="{value}". डेटा विशेषतांद्वारे पर्याय पास करताना पर्याय नावाचा केस प्रकार “ camelCase ” वरून “ kebab-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`	टोस्ट लपवण्यापूर्वी मिलिसेकंदांमध्ये विलंब करा.

पद्धती

असिंक्रोनस पद्धती आणि संक्रमणे

सर्व API पद्धती असिंक्रोनस आहेत आणि एक संक्रमण सुरू करतात . संक्रमण सुरू होताच परंतु ते संपण्यापूर्वी ते कॉलरकडे परत जातात . याव्यतिरिक्त, संक्रमण घटकावरील पद्धत कॉलकडे दुर्लक्ष केले जाईल .

अधिक माहितीसाठी आमचे JavaScript दस्तऐवजीकरण पहा .

पद्धत	वर्णन
`dispose`	घटकाचा टोस्ट लपवतो. तुमचा टोस्ट DOM वर राहील पण यापुढे दिसणार नाही.
`getInstance`	स्टॅटिक पद्धत जी तुम्हाला DOM घटकाशी संबंधित टोस्ट उदाहरण मिळविण्याची परवानगी देते. उदाहरणार्थ: `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...
})