Bootstrap 5 টোস্ট

Toast (টুস্ট)

Toast কম্পোনেন্ট নোটিফিকেশন বক্সের মতো, যখন কোনও ঘটনা ঘটে (যেমন ব্যবহারকারী বটন ক্লিক করবে, ফর্ম সমর্থন করবে ইত্যাদি) তখন তা কেবল কিছু সেকেন্ডের জন্য দেখানো হবে。

কিভাবে Toast তৈরি করা যায়

যদি আপনি Toast তৈরি করতে চান, তবে .toast শ্রেণীগুলি ব্যবহার করুন .toast-header এবং .toast-body。

ধ্যান দিনডিফল্টে, toast লুকানো থাকে। যদি এটা দেখাতে হয়, তবে .show শ্রেণী। যদি এটি বন্ধ করতে হয়, তবে <button> ইলেমেন্ট ব্যবহার করে এবং data-bs-dismiss="toast"：

<div class="toast show">
  <div class="toast-header">
    টোস্ট শিরোনাম
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    টোস্ট মূলস্বরূপের লেখা
  </div>
</div>

আপনার হাতে পরীক্ষা করুন

টোস্ট খুলুন

যদি আপনি বাটন দ্বারা Toast দেখাতে চান, তবে এটির প্রাথমিকভাবে ইনিশিয়েত করতে হবে: অনুমোদিত ইলেমেন্টটি নির্বাচন করুন এবং আহ্বান করুন toast() পদ্ধতি

যখন আপনি বাটনটি ক্লিক করেন, নিচের কোডটি ডকুমেন্টের সমস্ত toast দেখাবে:

একককার্য

<script>
document.getElementById("toastbtn").onclick = function() {
  var toastElList = [].slice.call(document.querySelectorAll('.toast'))
  var toastList = toastElList.map(function(toastEl) {
    return new bootstrap.Toast(toastEl)
  }
  toastList.forEach(toast => toast.show())
}
</script>

আপনার হাতে পরীক্ষা করুন