Difference between revisions of "Tabs"
From Tweeki
(→Markup) |
(→HTML) |
||
| Line 41: | Line 41: | ||
<pre> | <pre> | ||
| − | |||
<ul class="nav nav-tabs"> | <ul class="nav nav-tabs"> | ||
<li class="active"> | <li class="active"> | ||
| Line 58: | Line 57: | ||
</div> | </div> | ||
</div> | </div> | ||
| − | |||
</pre> | </pre> | ||
Revision as of 18:38, 4 July 2016
Standard Accordions
You can create accordions with very reduced 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>