मुख्य सामग्रीमा जानुहोस् कागजात नेभिगेसनमा जानुहोस्
Check
in English

टोस्टहरू

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

यस पृष्ठमा

टोस्टहरू मोबाइल र डेस्कटप अपरेटिङ सिस्टमहरूद्वारा लोकप्रिय भएका पुश सूचनाहरूको नक्कल गर्न डिजाइन गरिएका हल्का सूचनाहरू हुन्। तिनीहरू फ्लेक्सबक्सको साथ बनाइएका छन्, त्यसैले तिनीहरू पङ्क्तिबद्ध गर्न र स्थिति गर्न सजिलो छन्।

अवलोकन

टोस्ट प्लगइन प्रयोग गर्दा जान्नको लागि चीजहरू:

  • टोस्टहरू प्रदर्शन कारणहरूका लागि अप्ट-इन हुन्छन्, त्यसैले तपाईंले तिनीहरूलाई आफैं सुरु गर्नुपर्छ ।
  • यदि तपाईंले निर्दिष्ट गर्नुभएन भने टोस्टहरू स्वचालित रूपमा लुक्नेछ 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)। अब यो आवश्यक छैन। यद्यपि, पछाडि अनुकूलताको लागि, हाम्रो स्क्रिप्टले अर्को प्रमुख संस्करण सम्म कक्षालाई टगल गर्न जारी राख्नेछ (यसको लागि कुनै व्यावहारिक आवश्यकता नभए पनि)।

जीवित उदाहरण

पूर्वनिर्धारित रूपमा लुकाइएको टोस्ट (तल्लो दायाँ कुनामा हाम्रो उपयोगिताहरूसँग राखिएको) देखाउन तलको बटनमा क्लिक गर्नुहोस्।

<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()
  })
}

पारदर्शी

टोस्टहरू थोरै पारदर्शी हुन्छन् जुन तिनीहरूको तल छ।

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।

बुटस्ट्र्याप 11 मिनेट पहिले
नमस्कार संसार! यो टोस्ट सन्देश हो।
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 मा थपियो

Bootstrap को विकसित CSS चर दृष्टिकोण को एक भाग को रूप मा, toasts अब .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);

प्रयोग

जाभास्क्रिप्ट मार्फत टोस्टहरू प्रारम्भ गर्नुहोस्:

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>

विकल्पहरू

डेटा विशेषताहरू वा JavaScript मार्फत विकल्पहरू पास गर्न सकिने हुनाले, तपाईंले विकल्प नाम जोड्न सक्नुहुन्छ data-bs-, जस्तै मा data-bs-animation="{value}"। डेटा विशेषताहरू मार्फत विकल्पहरू पास गर्दा विकल्प नामको केस प्रकारलाई " camelCase " बाट " kebab-case " मा परिवर्तन गर्न निश्चित गर्नुहोस्। उदाहरण को लागी, data-bs-custom-class="beautifier"को सट्टा प्रयोग गर्नुहोस् data-bs-customClass="beautifier"।

बुटस्ट्र्याप ५.२.० को रूपमा, सबै कम्पोनेन्टहरूले प्रयोगात्मक आरक्षित डेटा विशेषतालाई समर्थन गर्दछ 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 तत्वको टोस्ट लुकाउँछ। तपाईंको टोस्ट DOM मा रहनेछ तर अब देखिने छैन।
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...
})