mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-02 16:04:07 +03:00
remove tabbable tabs on left, right, and bottom; instead, from here out use stacked pills or tabs
This commit is contained in:
Mark Otto
@@ -860,159 +860,6 @@
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
|
||||
<h2>Tabbable nav</h2>
|
||||
<p>Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.</p>
|
||||
|
||||
<h3>Tabbable example</h3>
|
||||
<p>To make tabs tabbable, create a <code>.tab-pane</code> with unique ID for every tab and wrap them in <code>.tab-content</code>.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="tabbable" style="margin-bottom: 18px;">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
|
||||
<li><a href="#tab2" data-toggle="tab">Section 2</a></li>
|
||||
<li><a href="#tab3" data-toggle="tab">Section 3</a></li>
|
||||
</ul>
|
||||
<div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
|
||||
<div class="tab-pane active" id="tab1">
|
||||
<p>I'm in Section 1.</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="tab2">
|
||||
<p>Howdy, I'm in Section 2.</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="tab3">
|
||||
<p>What up girl, this is Section 3.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- /tabbable -->
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="tabbable"> <!-- Only required for left/right tabs -->
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
|
||||
<li><a href="#tab2" data-toggle="tab">Section 2</a></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="tab1">
|
||||
<p>I'm in Section 1.</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="tab2">
|
||||
<p>Howdy, I'm in Section 2.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h4>Fade in tabs</h4>
|
||||
<p>To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.</p>
|
||||
|
||||
<h4>Requires jQuery plugin</h4>
|
||||
<p>All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life <a href="./javascript.html#tabs">on the JavaScript docs page</a>.</p>
|
||||
|
||||
<h3>Tabbable in any direction</h3>
|
||||
|
||||
<h4>Tabs on the bottom</h4>
|
||||
<p>Flip the order of the HTML and add a class to put tabs on the bottom.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="tabbable tabs-below">
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="A">
|
||||
<p>I'm in Section A.</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="B">
|
||||
<p>Howdy, I'm in Section B.</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="C">
|
||||
<p>What up girl, this is Section C.</p>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active"><a href="#A" data-toggle="tab">Section 1</a></li>
|
||||
<li><a href="#B" data-toggle="tab">Section 2</a></li>
|
||||
<li><a href="#C" data-toggle="tab">Section 3</a></li>
|
||||
</ul>
|
||||
</div> <!-- /tabbable -->
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="tabbable tabs-below">
|
||||
<div class="tab-content">
|
||||
...
|
||||
</div>
|
||||
<ul class="nav nav-tabs">
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h4>Tabs on the left</h4>
|
||||
<p>Swap the class to put tabs on the left.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="tabbable tabs-left">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active"><a href="#lA" data-toggle="tab">Section 1</a></li>
|
||||
<li><a href="#lB" data-toggle="tab">Section 2</a></li>
|
||||
<li><a href="#lC" data-toggle="tab">Section 3</a></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="lA">
|
||||
<p>I'm in Section A.</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="lB">
|
||||
<p>Howdy, I'm in Section B.</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="lC">
|
||||
<p>What up girl, this is Section C.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- /tabbable -->
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="tabbable tabs-left">
|
||||
<ul class="nav nav-tabs">
|
||||
...
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h4>Tabs on the right</h4>
|
||||
<p>Swap the class to put tabs on the right.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="tabbable tabs-right">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active"><a href="#rA" data-toggle="tab">Section 1</a></li>
|
||||
<li><a href="#rB" data-toggle="tab">Section 2</a></li>
|
||||
<li><a href="#rC" data-toggle="tab">Section 3</a></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="rA">
|
||||
<p>I'm in Section A.</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="rB">
|
||||
<p>Howdy, I'm in Section B.</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="rC">
|
||||
<p>What up girl, this is Section C.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- /tabbable -->
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="tabbable tabs-right">
|
||||
<ul class="nav nav-tabs">
|
||||
...
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user