Difference between revisions of "Tabs"
From Tweeki
(→Result) |
|||
| Line 31: | Line 31: | ||
====Result==== | ====Result==== | ||
| − | + | <ul class="nav nav-tabs" id="myTabs" role="tablist"> | |
| − | <ul class="nav nav-tabs"> | + | <li class="nav-item"><btn id="tab1Label" data-toggle="tab" class="nav-link active" role="tab" aria-controls="tab1" aria-selected="true">#tab1|Tab 1</btn></li> |
| − | <li class=" | + | <li><btn id="btn2Label" data-toggle="tab" class="nav-link" role="tab" aria-controls="tab2" aria-selected="false">#tab2|Tab 2</btn></li> |
| − | <li><btn data-toggle="tab" class="" | + | </ul> |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | </ | ||
| − | </ | ||
| − | </ | ||
| − | |||
| + | <div class="tab-content"> | ||
| + | <div id="tab1" class="tab-pane fade show active" role="tabpanel" aria-labelledby="tab1Label"> | ||
| + | '''Tab 1''': Lorem ipsum... | ||
| + | </div> | ||
| + | <div id="tab2" class="tab-pane fade" role="tabpanel" aria-labelledby="tab2Label"> | ||
| + | '''Tab 2''': Lorem ipsum... | ||
| + | </div> | ||
| + | </div> | ||
====HTML==== | ====HTML==== | ||
Revision as of 23:57, 16 November 2020
Togglable Tabs for Bootstrap 4
see Bootstrap's documentation for all the details of this feature.
You can create tabs with this code:
Markup
<ul class="nav nav-tabs" id="myTabs" role="tablist">
<li class="nav-item"><btn id="tab1Label" data-toggle="tab" class="nav-link active" role="tab" aria-controls="tab1" aria-selected="true">#tab1|Tab 1</btn></li>
<li><btn id="btn2Label" data-toggle="tab" class="nav-link" role="tab" aria-controls="tab2" aria-selected="false">#tab2|Tab 2</btn></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade show active" role="tabpanel" aria-labelledby="tab1Label">
'''Tab 1''': Lorem ipsum...
</div>
<div id="tab2" class="tab-pane fade" role="tabpanel" aria-labelledby="tab2Label">
'''Tab 2''': Lorem ipsum...
</div>
</div>
Result
Tab 1: Lorem ipsum...
Tab 2: Lorem ipsum...
HTML
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab1" id="n-.23tab1" class="tab-toggle" data-toggle="tab">Tab 1</a>
</li>
<li>
<a href="#tab2" id="n-.23tab2" class="tab-toggle" data-toggle="tab">Tab 2</a>
</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade in active">
<p><b>Tab 1</b>: Lorem ipsum...</p>
</div>
<div id="tab2" class="tab-pane fade">
<p><b>Tab 2</b>: Lorem ipsum...</p>
</div>
</div>
Togglable Tabs for Bootstrap 3
see Bootstrap's documentation for all the details of this feature.
You can create tabs with this code:
Markup
<ul class="nav nav-tabs">
<li class="active"><btn data-toggle="tab" class="">#tab1|Tab 1</btn></li>
<li><btn data-toggle="tab" class="">#tab2|Tab 2</btn></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade in active">
'''Tab 1''': Lorem ipsum...
</div>
<div id="tab2" class="tab-pane fade">
'''Tab 2''': Lorem ipsum...
</div>
</div>
Result
Tab 1: Lorem ipsum...
Tab 2: Lorem ipsum...
HTML
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab1" id="n-.23tab1" class="tab-toggle" data-toggle="tab">Tab 1</a>
</li>
<li>
<a href="#tab2" id="n-.23tab2" class="tab-toggle" data-toggle="tab">Tab 2</a>
</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade in active">
<p><b>Tab 1</b>: Lorem ipsum...</p>
</div>
<div id="tab2" class="tab-pane fade">
<p><b>Tab 2</b>: Lorem ipsum...</p>
</div>
</div>