Nav के Links
nav component links की एक list को एक simple horizontal या vertical menu की तरह style करता है।
In this page:
Syntax
<ul class="nav">
<li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
</ul>Nav Links
एक ul या nav element पर .nav से शुरू करें, .nav-item और .nav-link add करें, और vertical stacks के लिए .flex-column, centring के लिए .justify-content-center, और equal widths के लिए .nav-fill जैसे modifiers इस्तेमाल करें।
Current page को .active और aria-current से mark करें, और .disabled से disable करें।
Note:
screen readers के लिए active link पर aria-current="page" इस्तेमाल करें।
उदाहरण: Nav links
<!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">
<ul class="nav justify-content-center border-bottom mb-3">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Active</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link disabled" aria-disabled="true">Disabled</a></li>
</ul>
<nav class="nav flex-column" style="width:10rem"><a class="nav-link" href="#">One</a><a class="nav-link" href="#">Two</a></nav>
</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. #}
आम गलतियां
- nav-link भूल जाना
- active state missing होना
- links के लिए div elements इस्तेमाल करना
चैप्टर सारांश
- .nav, .nav-item, .nav-link classes चाहिए
- flex-column stack करता है
- nav-fill links spread करता है
- active और disabled states
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: