Responsive Navbar बनाना
एक responsive navbar छोटी screens पर इसके links को एक toggle button में collapse करता है।
In this page:
Syntax
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#nav-id">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nav-id">...</div>
</div>
</nav>Responsive Navbar
navbar-expand-{breakpoint} इस्तेमाल करें ताकि links उस size से एक row में दिखें और इससे नीचे collapse हों। .navbar-toggler button JS bundle के जरिए .collapse.navbar-collapse block toggle करता है।
Complete headers बनाने के लिए navbar-nav, dropdowns, search forms, और utilities add करें। Offcanvas एक sliding mobile menu के लिए collapse की जगह ले सकता है।
Note:
आपके कितने links हैं इसके आधार पर expand breakpoint चुनें।
उदाहरण: Responsive navbar
<!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">
<nav class="navbar navbar-expand-md bg-primary" data-bs-theme="dark">
<div class="container">
<a class="navbar-brand" href="#">ResponsiveNav</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#rnav" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="rnav">
<ul class="navbar-nav ms-auto"><li class="nav-item"><a class="nav-link active" href="#">Home</a></li><li class="nav-item"><a class="nav-link" href="#">Docs</a></li><li class="nav-item"><a class="nav-link" href="#">Blog</a></li></ul>
<form class="d-flex ms-md-3" role="search"><input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"><button class="btn btn-light">Go</button></form>
</div>
</div>
</nav>
</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. #}
आम गलतियां
- collapse id matching missing होना
- कोई navbar-expand class नहीं
- JS bundle भूल जाना
चैप्टर सारांश
- navbar-expand-* breakpoint set करता है
- toggler collapse control करता है
- navbar-collapse links hold करता है
- Offcanvas एक alternative है
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: