causeway-standard-theme
Version:
111 lines (104 loc) • 2.99 kB
HTML
<section>
<a id="tabstrip"></a>
<header class="content-header">
<h2 class="title">
Tabstrip
</h2>
</header>
<p>
Tabstrips comprise of 2 components the tabs and a series of content containers
</p>
<p>
The tabs and their containers are linked by ensuring the <code>id</code> attribute of the container is referenced in the <code>href</code> attribute of the tab and is unique on the page.
</p>
<p>
A single tab can be set active by adding the class <code>"active"</code> both to it and to the matching container.
</p>
<p>
Any tab can be set as disabled by adding the class <code>"disabled"</code> both to it and to the matching container.
</p>
<br/>
<div>
<ul class="nav nav-tabs">
<li>
<a href="#home" data-toggle="tab">
Tab 1
</a>
</li>
<li>
<a href="#profile" data-toggle="tab">
Tab 2
</a>
</li>
<li class="active">
<a href="#messages" data-toggle="tab">
Tab 3
</a>
</li>
<li class="disabled">
<a href="#settings" data-toggle="tab">
Tab 4
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="home">
Tab 1 Content
</div>
<div class="tab-pane" id="profile">
Tab 2 Content
</div>
<div class="tab-pane active" id="messages">
Tab 3 Content
</div>
<div class="tab-pane disabled" id="settings">
Tab 4 Content
</div>
</div>
</div>
<br/>
<pre>
<code>
<span class="title">Tabs</span>
<ul class="nav nav-tabs">
<li>
<a href="#home" data-toggle="tab">
Tab 1
</a>
</li>
<li>
<a href="#profile" data-toggle="tab">
Tab 2
</a>
</li>
<li class="active">
<a href="#messages" data-toggle="tab">
Tab 3
</a>
</li>
<li class="disabled">
<a href="#settings" data-toggle="tab">
Tab 4
</a>
</li>
</ul>
<br/>
<br/>
<span class="title">Content Containers</span>
<div class="tab-content">
<div class="tab-pane" id="home">
Tab 1 Content
</div>
<div class="tab-pane" id="profile">
Tab 2 Content
</div>
<div class="tab-pane active" id="messages">
Tab 3 Content
</div>
<div class="tab-pane disabled" id="settings">
Tab 4 Content
</div>
</div>
</code>
</pre>
</section>