Print की Utilities
Print utilities control करती हैं कि एक page print होने पर क्या appear होता है।
In this page:
Syntax
<nav class="d-print-none">hidden when printing</nav>
<div class="d-none d-print-block">only when printing</div>Print Utilities
print करते वक्त navigation जैसे elements hide करने के लिए .d-print-none, print-only content दिखाने के लिए .d-print-block या .d-print-inline, और print-only headers के लिए .d-none .d-print-block इस्तेमाल करें।
d-none d-print-block जैसी screen classes के साथ combine करें। browser के print preview से test करें।
Note:
d-print-none से printed pages से navbars, buttons, और ads hide करें।
उदाहरण: Print utilities
<!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="d-print-none alert alert-secondary">This banner is hidden when printing.</div>
<div class="d-none d-print-block">This text is only visible on the printed page.</div>
<p>This paragraph appears on screen and in print.</p>
</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. #}
आम गलतियां
- navigation hide करना भूल जाना
- dark backgrounds से print करना
- print preview test न करना
चैप्टर सारांश
- d-print-none print करते वक्त hide करता है
- d-print-block सिर्फ print करते वक्त दिखाता है
- d-none के साथ combine करें
- print preview check करें
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: