Offcanvas क्या है
एक offcanvas एक sidebar panel है जो screen के edge से slide in होता है।
In this page:
Syntax
<button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-id">Open</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas-id">
<div class="offcanvas-header">Title</div>
<div class="offcanvas-body">Content</div>
</div>Offcanvas
एक placement class (.offcanvas-start, -end, -top, या -bottom), एक header, और एक body के साथ .offcanvas इस्तेमाल करें। data-bs-toggle="offcanvas" और data-bs-target से इसे खोलें। Backdrop और scrolling behaviour data-bs-backdrop और data-bs-scroll से set हो सकते हैं।
Note:
Offcanvas mobile navigation menus के लिए great है।
उदाहरण: Offcanvas
<!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" data-bs-toggle="offcanvas" data-bs-target="#side">Open sidebar</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="side" aria-labelledby="sideLabel">
<div class="offcanvas-header"><h5 class="offcanvas-title" id="sideLabel">Menu</h5><button class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button></div>
<div class="offcanvas-body"><ul class="list-unstyled"><li>Home</li><li>Reports</li><li>Settings</li></ul></div>
</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. #}
आम गलतियां
- Placement class missing होना
- tabindex और aria-labelledby भूल जाना
- कोई close button नहीं
चैप्टर सारांश
- एक placement class वाला offcanvas
- Header और body sections
- data-bs-toggle="offcanvas" इसे खोलता है
- Backdrop और scroll options
🔒
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: