Tabs: Difference between revisions
From Tweeki
| (10 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
__TOC__ | __TOC__ | ||
[[Category:Components]] | [[Category:Components]] | ||
{{versions}} | |||
You can create | <div class="tab-content" id="versionContent"> | ||
<div class="tab-pane fade show active" id="bs4" role="tabpanel" aria-labelledby="bs4-tab"> | |||
=== Togglable Tabs for Bootstrap 4 === | |||
see [https://getbootstrap.com/docs/4.3/components/navs/#javascript-behavior Bootstrap's documentation] for all the details of this feature. | |||
You can create tabs with this code: | |||
==== Markup==== | |||
<nowiki><ul class="nav nav-tabs mb-2" id="myTabs" role="tablist"></nowiki> | |||
<nowiki><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></nowiki> | |||
<nowiki><li><btn id="btn2Label" data-toggle="tab" class="nav-link" role="tab" aria-controls="tab2" aria-selected="false">#tab2|Tab 2</btn></li></nowiki> | |||
<nowiki></ul></nowiki> | |||
<nowiki><div class="tab-content"></nowiki> | |||
<nowiki><div id="tab1" class="tab-pane fade show active" role="tabpanel" aria-labelledby="tab1Label"></nowiki> | |||
<nowiki>'''Tab 1''': Lorem ipsum...</nowiki> | |||
<nowiki></div></nowiki> | |||
<nowiki><div id="tab2" class="tab-pane fade" role="tabpanel" aria-labelledby="tab2Label"></nowiki> | |||
<nowiki>'''Tab 2''': Lorem ipsum...</nowiki> | |||
<nowiki></div></nowiki> | |||
<nowiki></div></nowiki> | |||
====Result==== | |||
<ul class="nav nav-tabs mb-2" 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> | |||
====HTML==== | |||
<pre> | |||
<ul class="nav nav-tabs mb-2" id="myTabs" role="tablist"> | |||
<li class="nav-item"><a href="#tab1" id="n-.23tab1" class="nav-link active tab-toggle" aria-controls="tab1" aria-selected="true" role="tab" data-toggle="tab">Tab 1</a></li> | |||
<li><a href="#tab2" id="n-.23tab2" class="nav-link tab-toggle" aria-controls="tab2" aria-selected="false" role="tab" data-toggle="tab">Tab 2</a></li> | |||
</ul> | |||
<div class="tab-content"> | |||
<div id="tab1" class="tab-pane fade show active" role="tabpanel" aria-labelledby="tab1Label"> | |||
<p><b>Tab 1</b>: Lorem ipsum... | |||
</p> | |||
</div> | |||
<div id="tab2" class="tab-pane fade" role="tabpanel" aria-labelledby="tab2Label"> | |||
<p><b>Tab 2</b>: Lorem ipsum... | |||
</p> | |||
</div> | |||
</div> | |||
</pre> | |||
</div> | |||
<div class="tab-pane fade" id="bs3" role="tabpanel" aria-labelledby="bs3-tab"> | |||
=== Togglable Tabs for Bootstrap 3 === | |||
see [http://getbootstrap.com/javascript/#tabs Bootstrap's documentation] for all the details of this feature. | |||
You can create tabs with this code: | |||
==== Markup==== | ==== Markup==== | ||
| Line 14: | Line 80: | ||
<nowiki><div class="tab-content"></nowiki> | <nowiki><div class="tab-content"></nowiki> | ||
<nowiki><div id="tab1" class="tab-pane fade in active"></nowiki> | <nowiki><div id="tab1" class="tab-pane fade in active"></nowiki> | ||
<nowiki> | <nowiki>'''Tab 1''': Lorem ipsum...</nowiki> | ||
<nowiki></div></nowiki> | <nowiki></div></nowiki> | ||
<nowiki><div id="tab2" class="tab-pane fade"></nowiki> | <nowiki><div id="tab2" class="tab-pane fade"></nowiki> | ||
<nowiki> | <nowiki>'''Tab 2''': Lorem ipsum...</nowiki> | ||
<nowiki></div></nowiki> | <nowiki></div></nowiki> | ||
<nowiki></div></nowiki> | <nowiki></div></nowiki> | ||
====Result==== | ====Result==== | ||
| Line 39: | Line 105: | ||
</div> | </div> | ||
</div> | </div> | ||
====HTML==== | ====HTML==== | ||
<pre> | <pre> | ||
<ul class="nav nav-tabs"> | <ul class="nav nav-tabs"> | ||
<li class="active"> | <li class="active"> | ||
| Line 60: | Line 127: | ||
</div> | </div> | ||
</div> | </div> | ||
</pre> | |||
</div> | |||
</div> | </div> | ||
Latest revision as of 00:02, 17 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 mb-2" 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 mb-2" id="myTabs" role="tablist"> <li class="nav-item"><a href="#tab1" id="n-.23tab1" class="nav-link active tab-toggle" aria-controls="tab1" aria-selected="true" role="tab" data-toggle="tab">Tab 1</a></li> <li><a href="#tab2" id="n-.23tab2" class="nav-link tab-toggle" aria-controls="tab2" aria-selected="false" role="tab" data-toggle="tab">Tab 2</a></li> </ul> <div class="tab-content"> <div id="tab1" class="tab-pane fade show active" role="tabpanel" aria-labelledby="tab1Label"> <p><b>Tab 1</b>: Lorem ipsum... </p> </div> <div id="tab2" class="tab-pane fade" role="tabpanel" aria-labelledby="tab2Label"> <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>