बूटस्ट्रैप 4 टोस्ट
बूटस्ट्रैप 4 टोस्ट
टोस्ट घटक एक अलर्ट बॉक्स की तरह होता है जो केवल कुछ सेकंड के लिए दिखाया जाता है जब कुछ होता है (यानी जब उपयोगकर्ता एक बटन पर क्लिक करता है, एक फॉर्म जमा करता है, आदि)।
टोस्ट कैसे बनाएं
एक टोस्ट बनाने के लिए, .toastकक्षा का उपयोग करें, और इसके अंदर एक .toast-headerऔर एक
जोड़ें:.toast-body
<div class="toast">
<div class="toast-header">
Toast Header
</div>
<div class="toast-body">
Some text inside the toast body
</div>
</div>
नोट: टोस्ट को jQuery के साथ प्रारंभ किया जाना चाहिए: निर्दिष्ट तत्व का चयन करें और toast()विधि को कॉल करें।
निम्नलिखित कोड दस्तावेज़ में सभी "टोस्ट" दिखाएगा:
उदाहरण
<script>
$(document).ready(function(){
$('.toast').toast('show');
});
</script>
एक टोस्ट दिखाएँ और छिपाएँ
टोस्ट डिफ़ॉल्ट रूप से छिपे होते हैं। data-autohide="false"
इसे डिफ़ॉल्ट रूप से दिखाने के लिए विशेषता का उपयोग करें । इसे बंद करने के लिए, <button> तत्व का उपयोग करें और जोड़ें data-dismiss="toast":
उदाहरण
<div class="toast" data-autohide="false">
<div class="toast-header">
<strong class="mr-auto text-primary">Toast Header</strong>
<small class="text-muted">5 mins ago</small>
<button
type="button" class="ml-2 mb-1 close" data-dismiss="toast">×</button>
</div>
<div class="toast-body">
Some text
inside the toast body
</div>
</div>
नोटिस mr-auto, ml-2और mb-1कक्षाएं? उनका उपयोग विशिष्ट मार्जिन जोड़ने के लिए किया जाता है। आप उनके बारे में बूटस्ट्रैप 4 यूटिलिटीज चैप्टर में अधिक जानेंगे ।
पूरा बूटस्ट्रैप टोस्ट संदर्भ
सभी टोस्ट विकल्पों, विधियों और घटनाओं के पूर्ण संदर्भ के लिए, हमारे बूटस्ट्रैप जेएस टोस्ट संदर्भ पर जाएं ।