Navs and tabs example 2
From Bootstrap for MediaWiki
| Component | ||
|---|---|---|
| Name | Navs and tabs | |
| Description | Pills, underlined tabs and vertical pills | |
| 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. | |
Pills
- Code
<ul class="nav nav-pills mb-3" role="tablist">
<li class="nav-item" role="presentation"><span class="nav-link active" data-bs-toggle="pill" data-bs-target="#pills-grid" role="tab" tabindex="0">Grid</span></li>
<li class="nav-item" role="presentation"><span class="nav-link" data-bs-toggle="pill" data-bs-target="#pills-colors" role="tab" tabindex="0">Colors</span></li>
<li class="nav-item" role="presentation"><span class="nav-link" data-bs-toggle="pill" data-bs-target="#pills-components" role="tab" tabindex="0">Components</span></li>
</ul>
<div class="tab-content mb-3">
<div class="tab-pane fade show active" id="pills-grid" role="tabpanel" tabindex="0">
The [[grid]] builds layouts from rows and up to twelve columns that adapt to the screen width.
</div>
<div class="tab-pane fade" id="pills-colors" role="tabpanel" tabindex="0">
[[Colors]] lists the CSS classes for text, background and border colors.
</div>
<div class="tab-pane fade" id="pills-components" role="tabpanel" tabindex="0">
[[Components]] lists all components documented on this wiki, with examples.
</div>
</div>
- Result
The grid builds layouts from rows and up to twelve columns that adapt to the screen width.
Colors lists the CSS classes for text, background and border colors.
Components lists all components documented on this wiki, with examples.
Underlined tabs
- Code
<ul class="nav nav-underline mb-3" role="tablist">
<li class="nav-item" role="presentation"><span class="nav-link active" data-bs-toggle="tab" data-bs-target="#underline-alert" role="tab" tabindex="0">Alert</span></li>
<li class="nav-item" role="presentation"><span class="nav-link" data-bs-toggle="tab" data-bs-target="#underline-badge" role="tab" tabindex="0">Badge</span></li>
<li class="nav-item" role="presentation"><span class="nav-link" data-bs-toggle="tab" data-bs-target="#underline-card" role="tab" tabindex="0">Card</span></li>
</ul>
<div class="tab-content mb-3">
<div class="tab-pane fade show active" id="underline-alert" role="tabpanel" tabindex="0">
An [[alert]] provides contextual feedback messages for typical user actions.
</div>
<div class="tab-pane fade" id="underline-badge" role="tabpanel" tabindex="0">
A [[badge]] provides a way to label content.
</div>
<div class="tab-pane fade" id="underline-card" role="tabpanel" tabindex="0">
A [[card]] is a flexible and extensible content container.
</div>
</div>
- Result
An alert provides contextual feedback messages for typical user actions.
A badge provides a way to label content.
A card is a flexible and extensible content container.
Vertical pills
- Code
<div class="d-flex align-items-start mb-3">
<ul class="nav flex-column nav-pills me-3" role="tablist">
<li class="nav-item" role="presentation"><span class="nav-link active" data-bs-toggle="pill" data-bs-target="#vertical-framework" role="tab" tabindex="0">Framework</span></li>
<li class="nav-item" role="presentation"><span class="nav-link" data-bs-toggle="pill" data-bs-target="#vertical-extension" role="tab" tabindex="0">Extension</span></li>
<li class="nav-item" role="presentation"><span class="nav-link" data-bs-toggle="pill" data-bs-target="#vertical-components" role="tab" tabindex="0">Components</span></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="vertical-framework" role="tabpanel" tabindex="0">
The [[Bootstrap (framework)|Bootstrap framework]] is a popular open-source front-end framework.
</div>
<div class="tab-pane fade" id="vertical-extension" role="tabpanel" tabindex="0">
The [[Bootstrap (extension)|Bootstrap extension]] provides the Bootstrap framework to MediaWiki.
</div>
<div class="tab-pane fade" id="vertical-components" role="tabpanel" tabindex="0">
The [[BootstrapComponents]] extension adds components that need HTML tags MediaWiki does not allow, such as <code>a</code> and <code>button</code>.
</div>
</div>
</div>
- Result
The Bootstrap framework is a popular open-source front-end framework.
The Bootstrap extension provides the Bootstrap framework to MediaWiki.
The BootstrapComponents extension adds components that need HTML tags MediaWiki does not allow, such as a and button.
