diff --git a/bootstrap.css b/bootstrap.css index c626cb0f50..49f31bc1d6 100644 --- a/bootstrap.css +++ b/bootstrap.css @@ -6,7 +6,7 @@ * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world @twitter by @mdo and @fat. - * Date: Tue Jan 24 18:24:24 PST 2012 + * Date: Tue Jan 24 19:19:33 PST 2012 */ article, aside, diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index dd723800b2..776ca58b91 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -125,7 +125,9 @@ section { } /* Subnav */ -.subhead .nav { +.subnav { + width: 100%; + height: 36px; background-color: #eeeeee; /* Old browsers */ background-repeat: repeat-x; /* Repeat the gradient */ background-image: -moz-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%); /* FF3.6+ */ @@ -138,23 +140,30 @@ section { border: 1px solid #e5e5e5; -webkit-border-radius: 4px; -moz-border-radius: 4px; - border-radius: 4px; + border-radius: 4px; +} +.subhead .nav { } .subhead .nav a { margin: 0; padding-top: 11px; padding-bottom: 11px; font-size: 13px; + color: #777; border-left: 1px solid #f5f5f5; border-right: 1px solid #e5e5e5; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } +.subhead .nav a:hover, .subhead .nav .active a { - background-color: #fff; + background-color: transparent; color: #333; } +.subhead .nav .active a { + background-color: #eee; +} .subhead .nav li:first-child a { border-left: 0; -webkit-border-radius: 4px 0 0 4px; @@ -165,17 +174,24 @@ section { border-right: 0; } -.subhead .subnav-fixed { +.subnav-fixed { position: fixed; top: 40px; + left: 0; + right: 0; z-index: 1030; - width: 938px; - -webkit-border-radius: 0 0 4px 4px; - -moz-border-radius: 0 0 4px 4px; - border-radius: 0 0 4px 4px; - -webkit-box-shadow: 0 1px 5px rgba(0,0,0,.05); - -moz-box-shadow: 0 1px 5px rgba(0,0,0,.05); - box-shadow: 0 1px 5px rgba(0,0,0,.05); + border-color: #d5d5d5; + border-width: 0 0 1px; /* drop the border on the fixed edges */ + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; + -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); + -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); + box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); +} +.subnav-fixed .nav { + width: 940px; + margin: 0 auto; } @@ -438,7 +454,7 @@ h2 + .row { /* Example sites showcase */ .example-sites img { - max-width: 290px; + max-width: 100%; } .marketing-byline { margin: -18px 0 27px; diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js index 4b7efe53fc..0252d75e96 100644 --- a/docs/assets/js/application.js +++ b/docs/assets/js/application.js @@ -118,8 +118,8 @@ $(function(){ // fix sub nav playa var $win = $(window) - , $nav = $('.subhead .nav') - , navTop = $('.subhead .nav').offset().top - 40 + , $nav = $('.subnav') + , navTop = $('.subnav').offset().top - 40 , isFixed = 0 processScroll() diff --git a/docs/base-css.html b/docs/base-css.html index bcb0c7d218..c849a299e0 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -63,13 +63,15 @@

Base CSS

On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.

- +
+ +
diff --git a/docs/components.html b/docs/components.html index 9d28b9e06b..50c615fb9e 100644 --- a/docs/components.html +++ b/docs/components.html @@ -58,11 +58,12 @@
- -
-

Components

-

Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.

+ +
+

Components

+

Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.

+
-
+
+ - -
-
-

Button groups Join buttons for more toolbar-like functionality

-
-
-
-

Button groups

-

Use button groups to join multiple buttons together as one composite component. Build them with a series of <a> or <button> elements.

-

You can also combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex projects.

-
-
- Left - Middle - Right -
+ +
+
+

Button groups Join buttons for more toolbar-like functionality

+
+
+
+

Button groups

+

Use button groups to join multiple buttons together as one composite component. Build them with a series of <a> or <button> elements.

+

You can also combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex projects.

+
+
+ Left + Middle + Right
-
-
-
- 1 - 2 - 3 - 4 -
-
- 5 - 6 - 7 -
-
- 8 -
-
-
-
-
-

Example markup

-

Here's how the HTML looks for a standard button group built with anchor tag buttons:

+
+
+
+ 1 + 2 + 3 + 4 +
+
+ 5 + 6 + 7 +
+
+ 8 +
+
+
+ +
+
+

Example markup

+

Here's how the HTML looks for a standard button group built with anchor tag buttons:

 <div class="btn-group">
   <a class="btn" href="#">1</a>
@@ -134,95 +136,95 @@
   </div>
 </div>
-
-
-

Checkbox and radio flavors

-

Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View the Javascript docs for that.

-

Get the javascript »

-
-

Heads up

-

CSS for button groups is in a separate file, button-groups.less.

-
-
- - - - -
-
-

Split button dropdowns Built on button groups to provide contextual menus

+
+

Checkbox and radio flavors

+

Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View the Javascript docs for that.

+

Get the javascript »

+
+

Heads up

+

CSS for button groups is in a separate file, button-groups.less.

-
-
-

Split button dropdowns

-

Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.

-
-
-
- Action - - -
-
- Action - - -
-
- Danger - - -
-
-
-
- Success - - -
-
- Info - - -
-
-
-
-
-

Example markup

-

Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.

+
+
+ + + + +
+
+

Split button dropdowns Built on button groups to provide contextual menus

+
+
+
+

Split button dropdowns

+

Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.

+
+
+
+ Action + + +
+
+ Action + + +
+
+ Danger + + +
+
+
+
+ Success + + +
+
+ Info + + +
+
+
+
+
+

Example markup

+

Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.

 <div class="btn-group">
   <a class="btn" href="#">Action</a>
@@ -234,9 +236,9 @@
   </ul>
 </div>
-
-
+
+
@@ -528,11 +530,6 @@

Tabbable in any direction

-

Tabs on the bottom

Flip the order of the HTML and add a class to put tabs on the bottom.

diff --git a/docs/javascript.html b/docs/javascript.html index 472285cc92..396bf15bc2 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -63,20 +63,22 @@

Javascript for Bootstrap

Bring Bootstrap's components to life—now with 12 custom jQuery plugins. -

+
+ +
diff --git a/docs/less.html b/docs/less.html index c8c1540b59..86a65a6c7e 100644 --- a/docs/less.html +++ b/docs/less.html @@ -67,12 +67,14 @@

Using LESS with Bootstrap

Customize and extend Bootstrap with LESS, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.

- +
+ +
diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 1fd8363aeb..bb18b03945 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -63,11 +63,13 @@

Scaffolding

Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.

- +
+ +
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 5552d6735d..41722aa710 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -3,13 +3,15 @@

{{_i}}Base CSS{{/i}}

{{_i}}On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.{{/i}}

- +
+ +
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 5282e61785..36fc84281b 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -1,8 +1,9 @@ - -
-

{{_i}}Components{{/i}}

-

{{_i}}Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.{{/i}}

+ +
+

{{_i}}Components{{/i}}

+

{{_i}}Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.{{/i}}

+
-
+
+ - -
-
-

{{_i}}Button groups{{/i}} {{_i}}Join buttons for more toolbar-like functionality{{/i}}

-
-
-
-

{{_i}}Button groups{{/i}}

-

{{_i}}Use button groups to join multiple buttons together as one composite component. Build them with a series of <a> or <button> elements.{{/i}}

-

{{_i}}You can also combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex projects.{{/i}}

-
-
- {{_i}}Left{{/i}} - {{_i}}Middle{{/i}} - {{_i}}Right{{/i}} -
+ +
+
+

{{_i}}Button groups{{/i}} {{_i}}Join buttons for more toolbar-like functionality{{/i}}

+
+
+
+

{{_i}}Button groups{{/i}}

+

{{_i}}Use button groups to join multiple buttons together as one composite component. Build them with a series of <a> or <button> elements.{{/i}}

+

{{_i}}You can also combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex projects.{{/i}}

+
+
+ {{_i}}Left{{/i}} + {{_i}}Middle{{/i}} + {{_i}}Right{{/i}}
-
-
-
- 1 - 2 - 3 - 4 -
-
- 5 - 6 - 7 -
-
- 8 -
-
-
-
-
-

{{_i}}Example markup{{/i}}

-

{{_i}}Here's how the HTML looks for a standard button group built with anchor tag buttons:{{/i}}

+
+
+
+ 1 + 2 + 3 + 4 +
+
+ 5 + 6 + 7 +
+
+ 8 +
+
+
+ +
+
+

{{_i}}Example markup{{/i}}

+

{{_i}}Here's how the HTML looks for a standard button group built with anchor tag buttons:{{/i}}

 <div class="btn-group">
   <a class="btn" href="#">1</a>
@@ -74,95 +76,95 @@
   </div>
 </div>
-
-
-

{{_i}}Checkbox and radio flavors{{/i}}

-

{{_i}}Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View the Javascript docs for that.{{/i}}

-

{{_i}}Get the javascript »{{/i}}

-
-

{{_i}}Heads up{{/i}}

-

{{_i}}CSS for button groups is in a separate file, button-groups.less.{{/i}}

-
-
- - - - -
-
-

{{_i}}Split button dropdowns{{/i}} {{_i}}Built on button groups to provide contextual menus{{/i}}

+
+

{{_i}}Checkbox and radio flavors{{/i}}

+

{{_i}}Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View the Javascript docs for that.{{/i}}

+

{{_i}}Get the javascript »{{/i}}

+
+

{{_i}}Heads up{{/i}}

+

{{_i}}CSS for button groups is in a separate file, button-groups.less.{{/i}}

-
-
-

{{_i}}Split button dropdowns{{/i}}

-

{{_i}}Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.{{/i}}

-
-
-
- {{_i}}Action{{/i}} - - -
-
- {{_i}}Action{{/i}} - - -
-
- {{_i}}Danger{{/i}} - - -
-
-
-
- {{_i}}Success{{/i}} - - -
-
- {{_i}}Info{{/i}} - - -
-
-
-
-
-

{{_i}}Example markup{{/i}}

-

{{_i}}Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.{{/i}}

+
+
+ + + + +
+
+

{{_i}}Split button dropdowns{{/i}} {{_i}}Built on button groups to provide contextual menus{{/i}}

+
+
+
+

{{_i}}Split button dropdowns{{/i}}

+

{{_i}}Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.{{/i}}

+
+
+
+ {{_i}}Action{{/i}} + + +
+
+ {{_i}}Action{{/i}} + + +
+
+ {{_i}}Danger{{/i}} + + +
+
+
+
+ {{_i}}Success{{/i}} + + +
+
+ {{_i}}Info{{/i}} + + +
+
+
+
+
+

{{_i}}Example markup{{/i}}

+

{{_i}}Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.{{/i}}

 <div class="btn-group">
   <a class="btn" href="#">{{_i}}Action{{/i}}</a>
@@ -174,9 +176,9 @@
   </ul>
 </div>
-
-
+
+
@@ -468,11 +470,6 @@

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

diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index 9fd431f2fd..b6b16fef21 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -3,20 +3,22 @@

{{_i}}Javascript for Bootstrap{{/i}}

{{_i}}Bring Bootstrap's components to life—now with 12 custom jQuery plugins.{{/i}} -

+
+ +
diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache index b5cff2d114..ea7058fd9b 100644 --- a/docs/templates/pages/less.mustache +++ b/docs/templates/pages/less.mustache @@ -7,12 +7,14 @@

{{_i}}Using LESS with Bootstrap{{/i}}

{{_i}}Customize and extend Bootstrap with LESS, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.{{/i}}

- +
+ +
diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache index a8638f2735..ed80dabfca 100644 --- a/docs/templates/pages/scaffolding.mustache +++ b/docs/templates/pages/scaffolding.mustache @@ -3,11 +3,13 @@

{{_i}}Scaffolding{{/i}}

{{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}

- +
+ +