چطور با استفاده از جاوااسکریپت toast ها رو در بوت‌ استرپ ۵ بنویسم؟

سلام برای راه‌ اندازی پیام نوتیفیکیشن در بوت‌استرپ با استفاده از جاوااسکریپت

اولین قدم اینه که HTML مربوط به توست رو به صفحه اضافه کنی. کد HTML برای توست باید شبیه به این باشه

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

بعد از اضافه کردن HTML، باید توست رو با جاوا اسکریپت نمایش بدی. این کار رو با استفاده از کد زیر انجام میدی

// Initialize toast
var toastEl = document.getElementById('liveToast')
var toast = new bootstrap.Toast(toastEl)
// Show the toast
toast.show()

باید یک عنصر توست با کلاس‌های toast و toast-container در HTML داشته باشی. این عنصر توست باید شامل هدر و بدنه پیام باشه

با  bootstrap.Toast توست رو از روی ID پیدا کن و با متد show() اون رو نمایش بده.

میتونی تنظیمات مختلفی مثل زمان نمایش یا تنظیمات آیکون رو هم به توست اضافه کنی، اما برای شروع همون کد پایه‌ای که گفتم کافی هست.

مطمئن شو که جاوا اسکریپت بوت‌ استرپ رو به صفحه‌ ات اضافه کردی. این کار رو میتونی با اضافه کردن لینک زیر اخر body انجام بدی

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

برای ا قابلیتای بیشتر توست‌ها مثل خودکار بستن یا تایمر، میتونی داک بوت‌ استرپ رو بررسی کنی.