mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-11 18:02:28 +03:00
Code Activity

remove tabbable tabs on left, right, and bottom; instead, from here out use stacked pills or tabs

Browse Source
This commit is contained in:
Mark Otto
2012-10-01 00:05:18 -07:00
parent ecf6077f48
commit 26386ad615
6 changed files with 2 additions and 468 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/templates/pages/components.mustache
Vendored
-153
View File
@@ -791,159 +791,6 @@
</ul>
</pre>
<hr class="bs-docs-separator">
<h2>{{_i}}Tabbable nav{{/i}}</h2>
<p>{{_i}}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.{{/i}}</p>
<h3>{{_i}}Tabbable example{{/i}}</h3>
<p>{{_i}}To make tabs tabbable, create a <code>.tab-pane</code> with unique ID for every tab and wrap them in <code>.tab-content</code>.{{/i}}</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">{{_i}}Section 1{{/i}}</a></li>
<li><a href="#tab2" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li>
<li><a href="#tab3" data-toggle="tab">{{_i}}Section 3{{/i}}</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}}I'm in Section 1.{{/i}}</p>
</div>
<div class="tab-pane" id="tab2">
<p>{{_i}}Howdy, I'm in Section 2.{{/i}}</p>
</div>
<div class="tab-pane" id="tab3">
<p>{{_i}}What up girl, this is Section 3.{{/i}}</p>
</div>
</div>
</div> <!-- /tabbable -->
</div>{{! /example }}
<pre class="prettyprint linenums">
&lt;div class="tabbable"&gt; &lt;!-- Only required for left/right tabs --&gt;
&lt;ul class="nav nav-tabs"&gt;
&lt;li class="active"&gt;&lt;a href="#tab1" data-toggle="tab"&gt;{{_i}}Section 1{{/i}}&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#tab2" data-toggle="tab"&gt;{{_i}}Section 2{{/i}}&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="tab-content"&gt;
&lt;div class="tab-pane active" id="tab1"&gt;
&lt;p&gt;{{_i}}I'm in Section 1.{{/i}}&lt;/p&gt;
&lt;/div&gt;
&lt;div class="tab-pane" id="tab2"&gt;
&lt;p&gt;{{_i}}Howdy, I'm in Section 2.{{/i}}&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
<h4>{{_i}}Fade in tabs{{/i}}</h4>
<p>{{_i}}To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.{{/i}}</p>
<h4>{{_i}}Requires jQuery plugin{{/i}}</h4>
<p>{{_i}}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>.{{/i}}</p>
<h3>{{_i}}Tabbable in any direction{{/i}}</h3>
<h4>{{_i}}Tabs on the bottom{{/i}}</h4>
<p>{{_i}}Flip the order of the HTML and add a class to put tabs on the bottom.{{/i}}</p>
<div class="bs-docs-example">
<div class="tabbable tabs-below">
<div class="tab-content">
<div class="tab-pane active" id="A">
<p>{{_i}}I'm in Section A.{{/i}}</p>
</div>
<div class="tab-pane" id="B">
<p>{{_i}}Howdy, I'm in Section B.{{/i}}</p>
</div>
<div class="tab-pane" id="C">
<p>{{_i}}What up girl, this is Section C.{{/i}}</p>
</div>
</div>
<ul class="nav nav-tabs">
<li class="active"><a href="#A" data-toggle="tab">{{_i}}Section 1{{/i}}</a></li>
<li><a href="#B" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li>
<li><a href="#C" data-toggle="tab">{{_i}}Section 3{{/i}}</a></li>
</ul>
</div> <!-- /tabbable -->
</div>{{! /example }}
<pre class="prettyprint linenums">
&lt;div class="tabbable tabs-below"&gt;
&lt;div class="tab-content"&gt;
...
&lt;/div&gt;
&lt;ul class="nav nav-tabs"&gt;
...
&lt;/ul&gt;
&lt;/div&gt;
</pre>
<h4>{{_i}}Tabs on the left{{/i}}</h4>
<p>{{_i}}Swap the class to put tabs on the left.{{/i}}</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">{{_i}}Section 1{{/i}}</a></li>
<li><a href="#lB" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li>
<li><a href="#lC" data-toggle="tab">{{_i}}Section 3{{/i}}</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="lA">
<p>{{_i}}I'm in Section A.{{/i}}</p>
</div>
<div class="tab-pane" id="lB">
<p>{{_i}}Howdy, I'm in Section B.{{/i}}</p>
</div>
<div class="tab-pane" id="lC">
<p>{{_i}}What up girl, this is Section C.{{/i}}</p>
</div>
</div>
</div> <!-- /tabbable -->
</div>{{! /example }}
<pre class="prettyprint linenums">
&lt;div class="tabbable tabs-left"&gt;
&lt;ul class="nav nav-tabs"&gt;
...
&lt;/ul&gt;
&lt;div class="tab-content"&gt;
...
&lt;/div&gt;
&lt;/div&gt;
</pre>
<h4>{{_i}}Tabs on the right{{/i}}</h4>
<p>{{_i}}Swap the class to put tabs on the right.{{/i}}</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">{{_i}}Section 1{{/i}}</a></li>
<li><a href="#rB" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li>
<li><a href="#rC" data-toggle="tab">{{_i}}Section 3{{/i}}</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="rA">
<p>{{_i}}I'm in Section A.{{/i}}</p>
</div>
<div class="tab-pane" id="rB">
<p>{{_i}}Howdy, I'm in Section B.{{/i}}</p>
</div>
<div class="tab-pane" id="rC">
<p>{{_i}}What up girl, this is Section C.{{/i}}</p>
</div>
</div>
</div> <!-- /tabbable -->
</div>{{! /example }}
<pre class="prettyprint linenums">
&lt;div class="tabbable tabs-right"&gt;
&lt;ul class="nav nav-tabs"&gt;
...
&lt;/ul&gt;
&lt;div class="tab-content"&gt;
...
&lt;/div&gt;
&lt;/div&gt;
</pre>
</section>
docs/templates/pages/javascript.mustache
Vendored
+1
View File
@@ -623,6 +623,7 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
&lt;li&gt;&lt;a href="#messages" data-toggle="tab"&gt;{{_i}}Messages{{/i}}&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#settings" data-toggle="tab"&gt;{{_i}}Settings{{/i}}&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>
<p>{{_i}}To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.{{/i}}</p>
<h3>{{_i}}Methods{{/i}}</h3>
<h4>$().tab</h4>