टोस्ट करतात

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

ह्या पानाचेर

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

नियाळ

टोस्ट प्लगइन वापरतना कळपाच्यो गजाली:

टोस्ट कार्यक्षमताय कारणांक लागून ऑप्ट-इन आसात, देखून तुमी स्वता तांकां आरंभ करपाक जाय .
तुमी स्पश्ट करूंक ना जाल्यार टोस्ट आपोआप लिपतले autohide: false.

ह्या घटकाचो एनिमेशन परिणाम prefers-reduced-motionमाध्यम क्वेरीचेर आदारून आसता. आमच्या सुलभताय दस्तावेजीकरणाचो उणो केल्ली गती विभाग पळयात .

उदाहरणां

मुळावें

विस्तारपाक येवपी आनी अदमासाक येवपी टोस्टांक प्रोत्साहन दिवपाक, आमी हेडर आनी बॉडी शिफारस करतात. Toast headers use display: flex, आमच्या मार्जिन आनी flexbox उपयुक्ततायांक लागून सामुग्री सोपी संरेखणाक परवानगी दिता.

टोस्ट तुमकां जाय तितले लवचीक आसतात आनी तातूंत गरजेचें मार्कअप सामकें उणें आसता. उण्यांत उणें, तुमची “टोस्टेड” सामुग्री आसपावपाक आमकां एकूच घटक जाय पडटा आनी डिसमिस बटणाक खरपणान प्रोत्साहन दितात.

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

एचटीएमएल हें नांव

<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, फक्त with 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>

सानुकूल सामुग्री

उप-घटक काडून, उपयुक्तताय कडेन ट्वीक करून , वा तुमचो स्वताचो मार्कअप जोडून तुमचे टोस्ट पसंतीचे करात. हांगा आमी मुलभूत काडून उडोवन , Bootstrap Icons.toast-header कडल्यान सानुकूल लिपोवप चिन्न जोडून , आनी मांडावळ समायोजीत करपाक कांय flexbox उपयुक्तताय वापरून एक सोपो टोस्ट तयार केला.

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

एचटीएमएल हें नांव

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

प्लेसमेंट करप

तुमकां जाय तशीं सानुकूल CSS कडेन टोस्ट दवरात. वयलो उजवो भाग चड करून अधिसुचोवण्यां खातीर वापरतात, तशेंच वयलो मदलो भाग. तुमी केन्नाच एका वेळार फकत एक टोस्ट दाखोवपाचे आसल्यार, पोझिशनिंग स्टाइल्स बरोबर घालात .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 उपयुक्तताय कडेन फॅन्सी मेळोवंक शकतात.

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

एचटीएमएल हें नांव

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

तंत्रीक नदरेन तुमच्या टोस्टांत फोकस करपाक येवपी/कृती करपाक येवपी नियंत्रणां (देखीक अतिरिक्त बटणां वा दुवे) जोडप शक्य आसलें तरी, तुमी ऑटोलिपडिंग टोस्टां खातीर हें करप टाळचें. Even if you give the toast a long delaytimeout , कीबोर्ड आनी सहाय्यक तंत्रज्ञान वापरप्यांक कृती करपाक वेळार टोस्ट मेरेन पावप कठीण जावं येता (कारण टोस्ट दाखयतात तेन्ना फोकस मेळना). तुमकां पूर्णपणान फुडले नियंत्रण आसपाक जाय जाल्यार, आमी टोस्ट वापरपाची शिफारस करतात autohide: false.

सीएसएस हें नांव

चड-उणें

v5.2.0 त जोडलां

Bootstrap च्या विकसीत जावपी 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 ” वयल्यान “ kebab -case ” कडेन बदलपाची खात्री करात . देखीक, data-bs-custom-class="beautifier"बदला वापरात data-bs-customClass="beautifier".

Bootstrap 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`	स्थिर पद्दत जी तुमकां 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...
})