diff options
Diffstat (limited to 'docs/components.html')
| -rw-r--r-- | docs/components.html | 153 |
1 files changed, 0 insertions, 153 deletions
diff --git a/docs/components.html b/docs/components.html index 7808d0477..87bef8db2 100644 --- a/docs/components.html +++ b/docs/components.html @@ -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> |