Tabs और Pills
Tabs और pills page छोड़े बिना content के panels के बीच switch करते हैं।
In this page:
Syntax
<ul class="nav nav-tabs">
<li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#pane-id">Tab</button></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="pane-id">content</div>
</div>Tabs और Pills
.tab-content के अंदर .tab-pane elements की ओर point करने वाले data-bs-toggle="tab" और data-bs-target carry करने वाले buttons के साथ .nav-tabs या .nav-pills इस्तेमाल करें।
पहले pane में .show.active है।
Accessibility के लिए role और aria attributes add करें। JS bundle switching handle करता है।
Note:
better semantics के लिए tabs के लिए anchors की बजाय role="tab" वाले buttons इस्तेमाल करें।
उदाहरण: Tabs & Pills
<!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">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item" role="presentation"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#t1" type="button" role="tab">Profile</button></li>
<li class="nav-item" role="presentation"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#t2" type="button" role="tab">Settings</button></li>
</ul>
<div class="tab-content border border-top-0 p-3">
<div class="tab-pane fade show active" id="t1" role="tabpanel">Profile content</div>
<div class="tab-pane fade" id="t2" role="tabpanel">Settings content</div>
</div>
<ul class="nav nav-pills mt-3"><li class="nav-item"><a class="nav-link active" href="#">Pill</a></li><li class="nav-item"><a class="nav-link" href="#">Pill two</a></li></ul>
</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. #}
आम गलतियां
- पहले pane पर show active missing होना
- Target ids को mismatched छोड़ना
- JS bundle भूल जाना
चैप्टर सारांश
- nav-tabs या nav-pills
- एक target के साथ data-bs-toggle="tab"
- tab-content tab-pane elements hold करता है
- पहला pane show active है
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: