From 26386ad615a48be02d896a41b7c72a7470c8a9c3 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 1 Oct 2012 00:05:18 -0700 Subject: [PATCH] remove tabbable tabs on left, right, and bottom; instead, from here out use stacked pills or tabs --- docs/assets/css/bootstrap.css | 81 ------------ docs/components.html | 153 ----------------------- docs/javascript.html | 1 + docs/templates/pages/components.mustache | 153 ----------------------- docs/templates/pages/javascript.mustache | 1 + less/navs.less | 81 ------------ 6 files changed, 2 insertions(+), 468 deletions(-) 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.

-
-
- -
-
-

I'm in Section 1.

-
-
-

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.

-
-
-
-
-

I'm in Section A.

-
-
-

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.

-
-
- -
-
-

I'm in Section A.

-
-
-

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.

-
-
- -
-
-

I'm in Section A.

-
-
-

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}}

-
-
-
-
{{! /example }} -
-<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}}

-
-
- -
-
{{! /example }} -
-<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}}

-
-
-
-
{{! /example }} -
-<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}}

-
-
-
-
{{! /example }} -
-<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 // ---------------