টোষ্ট

এটা টোষ্ট, এটা লঘু আৰু সহজে কাষ্টমাইজ কৰিব পৰা সতৰ্কবাণী বাৰ্তাৰ সৈতে আপোনাৰ দৰ্শকসকললৈ জাননীসমূহ ঠেলি দিয়ক।

এই পৃষ্ঠাত

টোষ্ট হৈছে মোবাইল আৰু ডেস্কটপ অপাৰেটিং চিষ্টেমৰ দ্বাৰা জনপ্ৰিয় কৰা পুছ নোটিফিকেচনসমূহৰ অনুকৰণ কৰিবলৈ ডিজাইন কৰা লঘু নোটিফিকেচন। ফ্লেক্সবক্সৰ সৈতে নিৰ্মাণ কৰা হৈছে, গতিকে ইয়াক প্ৰান্তিককৰণ আৰু স্থান দিয়াটো সহজ।

অভাৰভিউ

টোষ্ট প্লাগইন ব্যৱহাৰ কৰাৰ সময়ত জানিবলগীয়া কথাবোৰ:

টোষ্টসমূহ পৰিৱেশনৰ কাৰণে অপ্ট-ইন কৰা হয়, গতিকে আপুনি নিজেই সেইবোৰ আৰম্ভ কৰিব লাগিব ।
টোষ্টসমূহ স্বয়ংক্ৰিয়ভাৱে লুকাই থাকিব যদি আপুনি ধাৰ্য্য নকৰে 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>

আমি আমাৰ লাইভ টোষ্ট ডেমো ট্ৰিগাৰ কৰিবলৈ নিম্নলিখিত জাভাস্ক্রিপ্ট ব্যৱহাৰ কৰো:

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>

আপুনি টোষ্টসমূহক অনুভূমিকভাৱে আৰু/বা উলম্বভাৱে প্ৰান্তিককৰণ কৰিবলৈ 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, ব্যৱহাৰকাৰীসকলক টোষ্ট খাৰিজ কৰাৰ অনুমতি দিবলৈ আপুনি এটা বন্ধ বুটাম যোগ কৰিব লাগিব।

নমস্কাৰ, পৃথিৱী! এইটো এটা টোষ্ট বাৰ্তা।

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 ত যোগ কৰা হৈছে

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

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

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`	টোষ্ট লুকুৱাই ৰখাৰ আগতে মিলিছেকেণ্ডত পলম কৰক।

পদ্ধতিসমূহ

এচিংক্ৰ’নাছ পদ্ধতি আৰু পৰিৱৰ্তন

সকলো 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)`এটা 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...
})