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">
    Toast शीर्षक
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    toast मुख्यांकग्रह में की गई टेक्स्ट
  </div>
</div>

स्वयं प्रयोग करें

Toast खोलें

यदि आप बटन पर क्लिक करके Toast दिखाना चाहते हैं, तो आपको इसका प्रारंभ करने के लिए JavaScript का उपयोग करना होगा: कृपया निर्दिष्ट एलीमेंट चुनें और इसे आदेश दें 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>

स्वयं प्रयोग करें