Visibility क्या है
Visibility utilities visually elements hide करती हैं जबकि इनकी space रखती या हटाती हैं।
In this page:
Syntax
<div class="invisible">hidden but keeps space</div>
<span class="visually-hidden">screen reader text</span>Visibility
.visible और .invisible visibility toggle करते हैं लेकिन element की space रखते हैं। .visually-hidden content को visually hide करता है जबकि इसे screen readers के लिए available छोड़ता है, और .visually-hidden-focusable focus होने पर इसे दिखाता है, skip links के लिए perfect। d-none element को layout से पूरी तरह remove करता है।
Note:
सिर्फ screen readers को चाहिए वाले labels के लिए visually-hidden इस्तेमाल करें।
उदाहरण: Visibility
<!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">
<p>Before <span class="invisible">(invisible keeps space)</span> after</p>
<p>Before <span class="d-none">(d-none removes)</span> after</p>
<button class="btn btn-primary"><span class="visually-hidden">Add to cart</span>+</button>
<a class="visually-hidden-focusable" href="#main">Skip to content (visible when focused)</a>
</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. #}
आम गलतियां
- जब screen readers को text चाहिए हो तब d-none इस्तेमाल करना
- invisible को d-none से confuse करना
- focusable elements hide करना
चैप्टर सारांश
- invisible space रखता है
- d-none element remove करता है
- visually-hidden screen readers के लिए available रहता है
- skip links के लिए visually-hidden-focusable
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: