mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-17 09:52:29 +01: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
parent
ecf6077f48
commit
26386ad615
81
docs/assets/css/bootstrap.css
vendored
81
docs/assets/css/bootstrap.css
vendored
@ -3612,12 +3612,6 @@ input[type="button"].btn-block {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.tabs-below > .nav-tabs,
|
||||
.tabs-right > .nav-tabs,
|
||||
.tabs-left > .nav-tabs {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.tab-content > .tab-pane,
|
||||
.pill-content > .pill-pane {
|
||||
display: none;
|
||||
@ -3628,81 +3622,6 @@ input[type="button"].btn-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 {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
|
||||
@ -691,6 +691,7 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
|
||||
<li><a href="#messages" data-toggle="tab">Messages</a></li>
|
||||
<li><a href="#settings" data-toggle="tab">Settings</a></li>
|
||||
</ul></pre>
|
||||
<p>To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.</p>
|
||||
|
||||
<h3>Methods</h3>
|
||||
<h4>$().tab</h4>
|
||||
|
||||
153
docs/templates/pages/components.mustache
vendored
153
docs/templates/pages/components.mustache
vendored
@ -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">
|
||||
<div class="tabbable"> <!-- Only required for left/right tabs -->
|
||||
<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>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<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>
|
||||
</div>
|
||||
</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">
|
||||
<div class="tabbable tabs-below">
|
||||
<div class="tab-content">
|
||||
...
|
||||
</div>
|
||||
<ul class="nav nav-tabs">
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
</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">
|
||||
<div class="tabbable tabs-left">
|
||||
<ul class="nav nav-tabs">
|
||||
...
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<div class="tabbable tabs-right">
|
||||
<ul class="nav nav-tabs">
|
||||
...
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
1
docs/templates/pages/javascript.mustache
vendored
1
docs/templates/pages/javascript.mustache
vendored
@ -623,6 +623,7 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
|
||||
<li><a href="#messages" data-toggle="tab">{{_i}}Messages{{/i}}</a></li>
|
||||
<li><a href="#settings" data-toggle="tab">{{_i}}Settings{{/i}}</a></li>
|
||||
</ul></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>
|
||||
|
||||
@ -274,13 +274,6 @@
|
||||
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
|
||||
.tab-content > .tab-pane,
|
||||
.pill-content > .pill-pane {
|
||||
@ -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
|
||||
// ---------------
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user