Alert के प्रकार
Alerts success, warnings, या errors के बारे में छोटे, coloured messages दिखाते हैं।
In this page:
Syntax
<div class="alert alert-success" role="alert">Message</div>
<div class="alert alert-danger" role="alert">Message</div>Alert Types
.alert-success, .alert-warning, .alert-danger, या .alert-info जैसी एक contextual class और role="alert" के साथ .alert इस्तेमाल करें।
अंदर Links .alert-link इस्तेमाल करते हैं। आप headings और paragraphs add कर सकते हैं।
Colour को text से support होना चाहिए, क्योंकि सारे users colour नहीं देख सकते।
Note:
role="alert" screen readers को message announce कराता है।
उदाहरण: Alert types
<!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">
</head>
<body class="p-3">
<div class="container">
<div class="alert alert-success" role="alert">Saved! Your changes were stored.</div>
<div class="alert alert-warning" role="alert">Warning: disk space is low.</div>
<div class="alert alert-danger" role="alert">Error: could not connect. <a href="#" class="alert-link">Try again</a></div>
<div class="alert alert-info" role="alert">Tip: press ? to see shortcuts.</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. #}
आम गलतियां
- role alert missing होना
- सिर्फ colour पर depend करना
- permanent content के लिए alerts इस्तेमाल करना
चैप्टर सारांश
- alert और एक contextual class साथ चाहिए
- accessibility के लिए role="alert"
- alert-link links style करता है
- Colour को supporting text चाहिए
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: