Toasts क्या हैं
Toasts छोटी, temporary notifications हैं जो appear होती हैं और fade away होती हैं।
In this page:
Syntax
<div class="toast" id="toast-id" role="alert">
<div class="toast-header">Title</div>
<div class="toast-body">Message</div>
</div>
<script>
new bootstrap.Toast(document.getElementById('toast-id')).show();
</script>Toasts
.toast-header और .toast-body वाला एक .toast JavaScript से show होने तक hidden रहता है: new bootstrap.Toast(element).show()। Options में autohide और delay शामिल हैं।
Toasts को एक corner में रखने के लिए position utilities वाले .toast-container के अंदर रखें। role="alert" इन्हें announced कराता है।
Note:
Toasts को दिखने के लिए JavaScript चाहिए; ये default से hidden हैं।
उदाहरण: Toasts
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-3">
<div class="container">
<button class="btn btn-primary" id="showToast">Show 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"><strong class="me-auto">Bootstrap</strong><small>just now</small><button class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button></div>
<div class="toast-body">Hello! This is a toast message.</div>
</div>
</div>
</div>
<script>
document.getElementById("showToast").addEventListener("click", () => {
bootstrap.Toast.getOrCreateInstance(document.getElementById("liveToast")).show();
});
</script>
</body>
</html>Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- यह उम्मीद करना कि toasts automatically दिखेंगे
- toast-container placement missing होना
- role alert और aria-live missing होना
चैप्टर सारांश
- toast, toast-header, toast-body classes चाहिए
- new bootstrap.Toast(el).show() से दिखाएँ
- autohide और delay options
- एक toast-container में position करें
🔒
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: