Navbar के Basics
Navbar वह responsive header bar है जो एक brand, links, और दूसरी navigation hold करता है।
In this page:
Syntax
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand</a>
<div class="navbar-nav">
<a class="nav-link" href="#">Link</a>
</div>
</div>
</nav>Navbar Basics
.navbar और .navbar-expand-lg से एक nav बनाएँ lg पर expand करने के लिए, data-bs-theme="dark" और एक background class से एक colour scheme add करें। अंदर, .navbar-brand, एक .navbar-toggler button, और .navbar-nav links hold करने वाला एक .collapse.navbar-collapse रखें।
Toggler को Bootstrap JavaScript चाहिए।
Note:
navbar-expand-{breakpoint} control करता है कि links कहाँ collapse होना रोकें।
उदाहरण: Navbar basics
<!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-lg bg-dark" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Site</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav" aria-controls="nav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="nav">
<ul class="navbar-nav me-auto"><li class="nav-item"><a class="nav-link active" href="#">Home</a></li><li class="nav-item"><a class="nav-link" href="#">Pricing</a></li></ul>
</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. #}
आम गलतियां
- toggler के लिए JS bundle भूल जाना
- data-bs-target ids missing होना
- एक expand breakpoint न चुनना
चैप्टर सारांश
- navbar-expand-* के साथ .navbar
- Brand, toggler, और collapse
- navbar-nav links hold करता है
- Toggling के लिए JS bundle चाहिए
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: