স্কিপ করে মূল কন্টেন্ট এ যাও ডক্স নেভিগেশন এড়িয়ে যান
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।

সিএসএস

ভেরিয়েবল

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

ব্যবহার

জাভাস্ক্রিপ্টের মাধ্যমে টোস্ট শুরু করুন:

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

বুটস্ট্র্যাপ 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 পদ্ধতি অসিঙ্ক্রোনাস এবং একটি রূপান্তর শুরু করে । রূপান্তর শুরু হওয়ার সাথে সাথেই কিন্তু এটি শেষ হওয়ার আগেই তারা কলারের কাছে ফিরে আসে । উপরন্তু, একটি রূপান্তরকারী উপাদানের উপর একটি পদ্ধতি কল উপেক্ষা করা হবে ।

আরও তথ্যের জন্য আমাদের জাভাস্ক্রিপ্ট ডকুমেন্টেশন দেখুন ।

পদ্ধতি বর্ণনা
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...
})