Skip to content

B
bootstrap
Commit 26386ad6 authored by Mark Otto's avatar Mark Otto
Browse files
Options

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

parent ecf6077f
Hide whitespace changes
Inline Side-by-side
Showing with 2 additions and 468 deletions
docs/assets/css/bootstrap.css
View file @ 26386ad6
...@@ -3612,12 +3612,6 @@ input[type="button"].btn-block { ...@@ -3612,12 +3612,6 @@ input[type="button"].btn-block {
overflow: auto; overflow: auto;
} }
.tabs-below > .nav-tabs,
.tabs-right > .nav-tabs,
.tabs-left > .nav-tabs {
border-bottom: 0;
}
.tab-content > .tab-pane, .tab-content > .tab-pane,
.pill-content > .pill-pane { .pill-content > .pill-pane {
display: none; display: none;
...@@ -3628,81 +3622,6 @@ input[type="button"].btn-block { ...@@ -3628,81 +3622,6 @@ input[type="button"].btn-block {
display: block; display: block;
} }
.tabs-below > .nav-tabs {
border-top: 1px solid #ddd;
}
.tabs-below > .nav-tabs > li {
margin-top: -1px;
margin-bottom: 0;
}
.tabs-below > .nav-tabs > li > a {
border-radius: 0 0 4px 4px;
}
.tabs-below > .nav-tabs > li > a:hover {
border-top-color: #ddd;
border-bottom-color: transparent;
}
.tabs-below > .nav-tabs > .active > a,
.tabs-below > .nav-tabs > .active > a:hover {
border-color: transparent #ddd #ddd #ddd;
}
.tabs-left > .nav-tabs > li,
.tabs-right > .nav-tabs > li {
float: none;
}
.tabs-left > .nav-tabs > li > a,
.tabs-right > .nav-tabs > li > a {
min-width: 74px;
margin-right: 0;
margin-bottom: 3px;
}
.tabs-left > .nav-tabs {
float: left;
margin-right: 19px;
border-right: 1px solid #ddd;
}
.tabs-left > .nav-tabs > li > a {
margin-right: -1px;
border-radius: 4px 0 0 4px;
}
.tabs-left > .nav-tabs > li > a:hover {
border-color: #eeeeee #dddddd #eeeeee #eeeeee;
}
.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover {
border-color: #ddd transparent #ddd #ddd;
}
.tabs-right > .nav-tabs {
float: right;
margin-left: 19px;
border-left: 1px solid #ddd;
}
.tabs-right > .nav-tabs > li > a {
margin-left: -1px;
border-radius: 0 4px 4px 0;
}
.tabs-right > .nav-tabs > li > a:hover {
border-color: #eeeeee #eeeeee #eeeeee #dddddd;
}
.tabs-right > .nav-tabs .active > a,
.tabs-right > .nav-tabs .active > a:hover {
border-color: #ddd #ddd #ddd transparent;
}
.nav > .disabled > a { .nav > .disabled > a {
color: #999999; color: #999999;
} }
......
docs/components.html
View file @ 26386ad6
...@@ -860,159 +860,6 @@ ...@@ -860,159 +860,6 @@
</ul> </ul>
</pre> </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">
&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;Section 1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#tab2" data-toggle="tab"&gt;Section 2&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'm in Section 1.&lt;/p&gt;
&lt;/div&gt;
&lt;div class="tab-pane" id="tab2"&gt;
&lt;p&gt;Howdy, I'm in Section 2.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</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">
&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>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">
&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>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">
&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> </section>
......
docs/javascript.html
View file @ 26386ad6
...@@ -691,6 +691,7 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed) ...@@ -691,6 +691,7 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
&lt;li&gt;&lt;a href="#messages" data-toggle="tab"&gt;Messages&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#messages" data-toggle="tab"&gt;Messages&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#settings" data-toggle="tab"&gt;Settings&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#settings" data-toggle="tab"&gt;Settings&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre> &lt;/ul&gt;</pre>
<p>To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.</p>
<h3>Methods</h3> <h3>Methods</h3>
<h4>$().tab</h4> <h4>$().tab</h4>
......
docs/templates/pages/components.mustache
View file @ 26386ad6
...@@ -791,159 +791,6 @@ ...@@ -791,159 +791,6 @@
&lt;/ul&gt; &lt;/ul&gt;
</pre> </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> </section>
......
docs/templates/pages/javascript.mustache
View file @ 26386ad6
...@@ -623,6 +623,7 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed) ...@@ -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="#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;li&gt;&lt;a href="#settings" data-toggle="tab"&gt;{{_i}}Settings{{/i}}&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre> &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> <h3>{{_i}}Methods{{/i}}</h3>
<h4>$().tab</h4> <h4>$().tab</h4>
......
less/navs.less
View file @ 26386ad6
...@@ -274,13 +274,6 @@ ...@@ -274,13 +274,6 @@
overflow: auto; // prevent content from running below tabs overflow: auto; // prevent content from running below tabs
} }
// Remove border on bottom, left, right
.tabs-below > .nav-tabs,
.tabs-right > .nav-tabs,
.tabs-left > .nav-tabs {
border-bottom: 0;
}
// Show/hide tabbable areas // Show/hide tabbable areas
.tab-content > .tab-pane, .tab-content > .tab-pane,
.pill-content > .pill-pane { .pill-content > .pill-pane {
...@@ -292,80 +285,6 @@ ...@@ -292,80 +285,6 @@
} }
// BOTTOM
// ------
.tabs-below > .nav-tabs {
border-top: 1px solid #ddd;
}
.tabs-below > .nav-tabs > li {
margin-top: -1px;
margin-bottom: 0;
}
.tabs-below > .nav-tabs > li > a {
border-radius: 0 0 4px 4px;
&:hover {
border-bottom-color: transparent;
border-top-color: #ddd;
}
}
.tabs-below > .nav-tabs > .active > a,
.tabs-below > .nav-tabs > .active > a:hover {
border-color: transparent #ddd #ddd #ddd;
}
// LEFT & RIGHT
// ------------
// Common styles
.tabs-left > .nav-tabs > li,
.tabs-right > .nav-tabs > li {
float: none;
}
.tabs-left > .nav-tabs > li > a,
.tabs-right > .nav-tabs > li > a {
min-width: 74px;
margin-right: 0;
margin-bottom: 3px;
}
// Tabs on the left
.tabs-left > .nav-tabs {
float: left;
margin-right: 19px;
border-right: 1px solid #ddd;
}
.tabs-left > .nav-tabs > li > a {
margin-right: -1px;
border-radius: 4px 0 0 4px;
}
.tabs-left > .nav-tabs > li > a:hover {
border-color: @grayLighter #ddd @grayLighter @grayLighter;
}
.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover {
border-color: #ddd transparent #ddd #ddd;
}
// Tabs on the right
.tabs-right > .nav-tabs {
float: right;
margin-left: 19px;
border-left: 1px solid #ddd;
}
.tabs-right > .nav-tabs > li > a {
margin-left: -1px;
border-radius: 0 4px 4px 0;
}
.tabs-right > .nav-tabs > li > a:hover {
border-color: @grayLighter @grayLighter @grayLighter #ddd;
}
.tabs-right > .nav-tabs .active > a,
.tabs-right > .nav-tabs .active > a:hover {
border-color: #ddd #ddd #ddd transparent;
}
// DISABLED STATES // DISABLED STATES
// --------------- // ---------------
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment