टोस्ट्

टोस्ट्, हल्केन सुलभतया अनुकूलनीयेन च सचेतनासन्देशेन सह स्व आगन्तुकानां कृते सूचनाः धक्कायन्तु।

इस पृष्ठ पर

टोस्ट् इति लघुसूचनाः सन्ति, ये पुश-सूचनाः अनुकरणाय विनिर्मिताः सन्ति, ये मोबाईल-डेस्कटॉप्-प्रचालन-प्रणालीभिः लोकप्रियाः कृताः सन्ति । ते flexbox इत्यनेन सह निर्मिताः सन्ति, अतः तेषां संरेखणं स्थापयितुं च सुलभम् अस्ति ।

अवलोकनम्

टोस्ट् प्लगिन् इत्यस्य उपयोगं कुर्वन् ज्ञातव्यानि वस्तूनि:

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

अस्य घटकस्य एनिमेशन-प्रभावः prefers-reduced-motionमीडिया-प्रश्नस्य उपरि निर्भरः भवति । अस्माकं सुलभतादस्तावेजस्य न्यूनीकृतगतिविभागं पश्यन्तु .

उदाहरणानि

आधारभूत

विस्तारयोग्यं पूर्वानुमानीयं च टोस्ट् प्रोत्साहयितुं वयं शीर्षकं शरीरं च अनुशंसयामः । Toast headers use display: flex, अस्माकं मार्जिनस्य तथा flexbox उपयोगितानां धन्यवादेन सामग्रीयाः सुलभसंरेखणस्य अनुमतिं ददाति।

टोस्ट् यथा आवश्यकं तथा लचीलाः भवन्ति तथा च अत्यल्पं आवश्यकं मार्कअपं भवति। न्यूनतया, वयं भवतः “टोस्टेड्” सामग्रीं समाविष्टुं एकं तत्त्वं आवश्यकं भवति तथा च एकं निराकरणबटनं दृढतया प्रोत्साहयामः।

नमस्कार, जगत् ! एषः टोस्ट् सन्देशः अस्ति।

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वर्गं योजयन्ति स्म एकं टोस्ट् पूर्णतया गोपयितुं (with display:none, rather than just 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()
  })
}

अर्धपारदर्शी

टोस्ट् किञ्चित् अर्धपारदर्शकं भवति यत् तेषां अधः यत् अस्ति तत् सह मिश्रणं भवति।

नमस्कार, जगत् ! एषः टोस्ट् सन्देशः अस्ति।

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>

कस्टम सामग्री

उपघटकानाम् अपसारयित्वा, उपयोगिताभिः सह tweaking कृत्वा , अथवा स्वस्य मार्कअपं योजयित्वा स्वस्य टोस्ट् अनुकूलितं कुर्वन्तु । अत्र वयं पूर्वनिर्धारितं निष्कास्य सरलतरं टोस्ट् निर्मितवन्तः , Bootstrap Icons.toast-header तः कस्टम् hide चिह्नं योजयित्वा , तथा च लेआउट् समायोजयितुं केषाञ्चन flexbox उपयोगितानां उपयोगेन ।

नमस्कार, जगत् ! एषः टोस्ट् सन्देशः अस्ति।

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अस्माकं close बटन् मध्ये योजितवन्तः । कुरकुराधारस्य कृते, वयं पूर्वनिर्धारितं सीमां निष्कासयामः .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>

अधिकानि सूचनानि जनयन्तः प्रणाल्याः कृते, एकं wrapping element इत्यस्य उपयोगं विचारयन्तु येन ते सहजतया stack कर्तुं शक्नुवन्ति ।

पश्यतु? एवम् एव ।

शिरः उपरि, टोस्ट् स्वयमेव स्तम्भयिष्यति

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>

टोस्ट् क्षैतिजरूपेण तथा/वा लम्बवत् संरेखयितुं flexbox उपयोगिताभिः सह अपि भवन्तः आडम्बरं प्राप्तुं शक्नुवन्ति ।

नमस्कार, जगत् ! एषः टोस्ट् सन्देशः अस्ति।

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, उपयोक्तृभ्यः टोस्ट् निष्कासयितुं अनुमतिं दातुं भवद्भिः close बटनं योजयितव्यम् ।

नमस्कार, जगत् ! एषः टोस्ट् सन्देशः अस्ति।

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>

यद्यपि तकनीकीरूपेण भवतः टोस्ट् मध्ये केन्द्रीकरणीय/क्रियाशीलनियन्त्रणानि (यथा अतिरिक्तबटनानि वा लिङ्कानि) योजयितुं शक्यते तथापि स्वतःगोपनटोस्ट् कृते एतत् कर्तुं भवद्भिः परिहारः करणीयः Even if you give the toast a long delaytimeout , कीबोर्ड तथा सहायक प्रौद्योगिकी उपयोक्तारः कार्यवाही कर्तुं समये टोस्ट् प्राप्तुं कठिनं अनुभवितुं शक्नुवन्ति (यतोहि टोस्ट् प्रदर्शितस्य समये फोकस न प्राप्नुवन्ति)। यदि भवतः सर्वथा अधिकानि नियन्त्रणानि भवितुमर्हन्ति तर्हि वयं टोस्ट् इत्यस्य उपयोगं अनुशंसयामः autohide: false.

CSS इति

चर

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 attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते, भवान् विकल्पनाम योजयितुं शक्नोति data-bs-, यथा data-bs-animation="{value}". data attributes मार्गेण विकल्पान् पारयन्ते सति विकल्पनामस्य case type “ 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}'and data-bs-title="456"attributes भवति तदा अन्तिममूल्यं titleभविष्यति 456तथा च पृथक् data attributes इत्यत्र दत्तानि मूल्यानि अधिलिखिष्यन्ति 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)`Bootstrap toast उदाहरणं ददाति ।
`getOrCreateInstance`	स्थिरविधिः या भवन्तं DOM-तत्त्वेन सह सम्बद्धं टोस्ट-दृष्टान्तं प्राप्तुं, अथवा नूतनं निर्मातुं शक्नोति, यद्यपि तत् आरम्भं न कृतम् आसीत् । `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)`एकं Bootstrap टोस्ट् उदाहरणं ददाति ।
`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...
})