Navs and tabs example 1
From Bootstrap for MediaWiki
| Component | ||
|---|---|---|
| Name | Navs and tabs | |
| Description | Tabs that switch between content panes | |
| Provider | Skin | |
| Note | The code differs a little from Bootstrap's documentation, because MediaWiki does not allow buttons in wikitext. | |
| Reference | getbootstrap.com - navs and tabs | |
| Styling | For all possible color styles and corresponding examples, see colors. | |
Tabs
- Code
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item" role="presentation"><span class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabs-chameleon" role="tab" tabindex="0">Chameleon</span></li>
<li class="nav-item" role="presentation"><span class="nav-link" data-bs-toggle="tab" data-bs-target="#tabs-medik" role="tab" tabindex="0">Medik</span></li>
<li class="nav-item" role="presentation"><span class="nav-link" data-bs-toggle="tab" data-bs-target="#tabs-tweeki" role="tab" tabindex="0">Tweeki</span></li>
</ul>
<div class="tab-content border border-top-0 rounded-bottom p-3 mb-3">
<div class="tab-pane fade show active" id="tabs-chameleon" role="tabpanel" tabindex="0">
[[Chameleon]] is a highly customizable skin that uses Bootstrap. It provides five layouts, and this wiki uses it.
</div>
<div class="tab-pane fade" id="tabs-medik" role="tabpanel" tabindex="0">
[[Medik]] is a simple and customizable skin that bundles its own copy of Bootstrap.
</div>
<div class="tab-pane fade" id="tabs-tweeki" role="tabpanel" tabindex="0">
[[Tweeki]] is a highly customizable skin that implements as much of Bootstrap's functionality as possible.
</div>
</div>
- Result
