diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index e9be205647..c0b6ef3957 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -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;
}
diff --git a/docs/components.html b/docs/components.html
index 7808d04774..87bef8db28 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -860,159 +860,6 @@
</ul>
-
-
-
-
- Tabbable nav
- 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.
-
- Tabbable example
- To make tabs tabbable, create a .tab-pane with unique ID for every tab and wrap them in .tab-content.
-
-
-
-
-
-
-
Howdy, I'm in Section 2.
-
-
-
What up girl, this is Section 3.
-
-
-
-
-<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>
-
-
- Fade in tabs
- To make tabs fade in, add .fade to each .tab-pane.
-
- Requires jQuery plugin
- All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the JavaScript docs page.
-
- Tabbable in any direction
-
- Tabs on the bottom
- Flip the order of the HTML and add a class to put tabs on the bottom.
-
-
-
-
-
-
Howdy, I'm in Section B.
-
-
-
What up girl, this is Section C.
-
-
-
-
-
-<div class="tabbable tabs-below">
- <div class="tab-content">
- ...
- </div>
- <ul class="nav nav-tabs">
- ...
- </ul>
-</div>
-
-
- Tabs on the left
- Swap the class to put tabs on the left.
-
-
-
-
-
-
-
Howdy, I'm in Section B.
-
-
-
What up girl, this is Section C.
-
-
-
-
-<div class="tabbable tabs-left">
- <ul class="nav nav-tabs">
- ...
- </ul>
- <div class="tab-content">
- ...
- </div>
-</div>
-
-
- Tabs on the right
- Swap the class to put tabs on the right.
-
-
-
-
-
-
-
Howdy, I'm in Section B.
-
-
-
What up girl, this is Section C.
-
-
-
-
-<div class="tabbable tabs-right">
- <ul class="nav nav-tabs">
- ...
- </ul>
- <div class="tab-content">
- ...
- </div>
-</div>
-
-
diff --git a/docs/javascript.html b/docs/javascript.html
index 03d6701328..241ea9cd03 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -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>
+ To make tabs fade in, add .fade to each .tab-pane.
Methods
$().tab
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 2ea87c16fe..c6a6776d04 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -791,159 +791,6 @@
</ul>
-
-
-
-
- {{_i}}Tabbable nav{{/i}}
- {{_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}}
-
- {{_i}}Tabbable example{{/i}}
- {{_i}}To make tabs tabbable, create a .tab-pane with unique ID for every tab and wrap them in .tab-content.{{/i}}
-
-
-
-
-
-
{{_i}}I'm in Section 1.{{/i}}
-
-
-
{{_i}}Howdy, I'm in Section 2.{{/i}}
-
-
-
{{_i}}What up girl, this is Section 3.{{/i}}
-
-
-
-
-<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>
-
-
- {{_i}}Fade in tabs{{/i}}
- {{_i}}To make tabs fade in, add .fade to each .tab-pane.{{/i}}
-
- {{_i}}Requires jQuery plugin{{/i}}
- {{_i}}All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the JavaScript docs page.{{/i}}
-
- {{_i}}Tabbable in any direction{{/i}}
-
- {{_i}}Tabs on the bottom{{/i}}
- {{_i}}Flip the order of the HTML and add a class to put tabs on the bottom.{{/i}}
-
-
-
-
-
{{_i}}I'm in Section A.{{/i}}
-
-
-
{{_i}}Howdy, I'm in Section B.{{/i}}
-
-
-
{{_i}}What up girl, this is Section C.{{/i}}
-
-
-
-
-
-<div class="tabbable tabs-below">
- <div class="tab-content">
- ...
- </div>
- <ul class="nav nav-tabs">
- ...
- </ul>
-</div>
-
-
- {{_i}}Tabs on the left{{/i}}
- {{_i}}Swap the class to put tabs on the left.{{/i}}
-
-
-
-
-
-
{{_i}}I'm in Section A.{{/i}}
-
-
-
{{_i}}Howdy, I'm in Section B.{{/i}}
-
-
-
{{_i}}What up girl, this is Section C.{{/i}}
-
-
-
-
-<div class="tabbable tabs-left">
- <ul class="nav nav-tabs">
- ...
- </ul>
- <div class="tab-content">
- ...
- </div>
-</div>
-
-
- {{_i}}Tabs on the right{{/i}}
- {{_i}}Swap the class to put tabs on the right.{{/i}}
-
-
-
-
-
-
{{_i}}I'm in Section A.{{/i}}
-
-
-
{{_i}}Howdy, I'm in Section B.{{/i}}
-
-
-
{{_i}}What up girl, this is Section C.{{/i}}
-
-
-
-
-<div class="tabbable tabs-right">
- <ul class="nav nav-tabs">
- ...
- </ul>
- <div class="tab-content">
- ...
- </div>
-</div>
-
-
diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index 6b7821f101..e3a5e5cedb 100644
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -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>
+ {{_i}}To make tabs fade in, add .fade to each .tab-pane.{{/i}}
{{_i}}Methods{{/i}}
$().tab
diff --git a/less/navs.less b/less/navs.less
index 841b773cec..923f728526 100644
--- a/less/navs.less
+++ b/less/navs.less
@@ -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
// ---------------