बंद होने वाले Alerts
एक dismissible alert में एक close button है जो इसे page से remove करता है।
In this page:
Syntax
<div class="alert alert-warning alert-dismissible fade show" role="alert">
Message
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>Dismissible Alerts
.alert-dismissible, data-bs-dismiss="alert" वाला एक .btn-close button, और typically animation के लिए .fade .show add करें। button click होने पर JavaScript bundle alert remove करता है। Close button को एक aria-label दें।
Note:
smooth fade-out के लिए fade और show साथ इस्तेमाल करें।
उदाहरण: Dismissible alerts
<!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">
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Heads up!</strong> Click the X to dismiss this alert.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>
</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. #}
आम गलतियां
- alert-dismissible padding भूल जाना
- data-bs-dismiss missing होना
- close button पर कोई aria-label नहीं
चैप्टर सारांश
- alert-dismissible room add करता है
- data-bs-dismiss="alert" वाला btn-close
- fade show animate करता है
- JS bundle चाहिए
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: