diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip index 5a3e369357..b15d66b4a1 100644 Binary files a/docs/assets/bootstrap.zip and b/docs/assets/bootstrap.zip differ diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index c8c6302964..de454224ea 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -205,40 +205,40 @@ .row-fluid > [class*="span"]:first-child { margin-left: 0; } - .row-fluid .span1 { + .row-fluid > .span1 { width: 5.801104972%; } - .row-fluid .span2 { + .row-fluid > .span2 { width: 14.364640883%; } - .row-fluid .span3 { + .row-fluid > .span3 { width: 22.928176794%; } - .row-fluid .span4 { + .row-fluid > .span4 { width: 31.491712705%; } - .row-fluid .span5 { + .row-fluid > .span5 { width: 40.055248616%; } - .row-fluid .span6 { + .row-fluid > .span6 { width: 48.618784527%; } - .row-fluid .span7 { + .row-fluid > .span7 { width: 57.182320438000005%; } - .row-fluid .span8 { + .row-fluid > .span8 { width: 65.74585634900001%; } - .row-fluid .span9 { + .row-fluid > .span9 { width: 74.30939226%; } - .row-fluid .span10 { + .row-fluid > .span10 { width: 82.87292817100001%; } - .row-fluid .span11 { + .row-fluid > .span11 { width: 91.436464082%; } - .row-fluid .span12 { + .row-fluid > .span12 { width: 99.999999993%; } input.span1, textarea.span1, .uneditable-input.span1 { @@ -486,40 +486,40 @@ .row-fluid > [class*="span"]:first-child { margin-left: 0; } - .row-fluid .span1 { + .row-fluid > .span1 { width: 5.982905983%; } - .row-fluid .span2 { + .row-fluid > .span2 { width: 14.529914530000001%; } - .row-fluid .span3 { + .row-fluid > .span3 { width: 23.076923077%; } - .row-fluid .span4 { + .row-fluid > .span4 { width: 31.623931624%; } - .row-fluid .span5 { + .row-fluid > .span5 { width: 40.170940171000005%; } - .row-fluid .span6 { + .row-fluid > .span6 { width: 48.717948718%; } - .row-fluid .span7 { + .row-fluid > .span7 { width: 57.264957265%; } - .row-fluid .span8 { + .row-fluid > .span8 { width: 65.81196581200001%; } - .row-fluid .span9 { + .row-fluid > .span9 { width: 74.358974359%; } - .row-fluid .span10 { + .row-fluid > .span10 { width: 82.905982906%; } - .row-fluid .span11 { + .row-fluid > .span11 { width: 91.45299145300001%; } - .row-fluid .span12 { + .row-fluid > .span12 { width: 100%; } input.span1, textarea.span1, .uneditable-input.span1 { diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 754e9af2d3..61e67360c4 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -212,40 +212,40 @@ a:hover { .row-fluid > [class*="span"]:first-child { margin-left: 0; } -.row-fluid .span1 { +.row-fluid > .span1 { width: 6.382978723%; } -.row-fluid .span2 { +.row-fluid > .span2 { width: 14.89361702%; } -.row-fluid .span3 { +.row-fluid > .span3 { width: 23.404255317%; } -.row-fluid .span4 { +.row-fluid > .span4 { width: 31.914893614%; } -.row-fluid .span5 { +.row-fluid > .span5 { width: 40.425531911%; } -.row-fluid .span6 { +.row-fluid > .span6 { width: 48.93617020799999%; } -.row-fluid .span7 { +.row-fluid > .span7 { width: 57.446808505%; } -.row-fluid .span8 { +.row-fluid > .span8 { width: 65.95744680199999%; } -.row-fluid .span9 { +.row-fluid > .span9 { width: 74.468085099%; } -.row-fluid .span10 { +.row-fluid > .span10 { width: 82.97872339599999%; } -.row-fluid .span11 { +.row-fluid > .span11 { width: 91.489361693%; } -.row-fluid .span12 { +.row-fluid > .span12 { width: 99.99999998999999%; } .container { diff --git a/docs/scaffolding.html b/docs/scaffolding.html index ba79465afe..18ec5fb422 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -81,7 +81,9 @@

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

-

Fluid example

+ +
+
+<div class="row">
+  <div class="span12">
+    Level 1 of column
+    <div class="row">
+      <div class="span6">Level 2</div>
+      <div class="span6">Level 2</div>
+    </div>
+  </div>
+</div>
+
+
+ + + + + + +
+ + +

Fluid columns

+
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
+
+
4
+
4
+
4
+
+
+
4
+
8
+
+
+
6
+
6
+
+
+
12
+
+ +
+
+

Percents, not pixels

+

The fluid grid system uses percents for column widths instead of fixed pixels. It also has the same responsive variations as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.

+
+
+

Fluid rows

+

Make any row fluid simply by changing .row to .row-fluid. The columns stay the exact same, making it super straightforward to flip between fixed and fluid layouts.

+
+
+

Markup

+
+<div class="row-fluid">
+  <div class="span4">...</div>
+  <div class="span8">...</div>
+</div>
+
+
+
+ +

Fluid nesting

+
+

Nesting with fluid grids is a bit different: the number of nested columns doesn't need to match the parent. Instead, your columns are reset at each level because each row takes up 100% of the parent column.

@@ -206,10 +287,10 @@
-<div class="row">
+<div class="row-fluid">
   <div class="span12">
     Level 1 of column
-    <div class="row">
+    <div class="row-fluid">
       <div class="span6">Level 2</div>
       <div class="span6">Level 2</div>
     </div>
@@ -219,7 +300,16 @@
     
-

Grid customization

+
+ + + + +
+ @@ -281,8 +371,8 @@

Fixed layout

The default and simple 940px-wide, centered layout for just about any website or page provided by a single <div class="container">.

-
-
+
+
 <body>
@@ -295,9 +385,9 @@
     

Fluid layout

<div class="container-fluid"> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.

-
-
-
+
+
+
 <div class="container-fluid">
diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache
index 74b824d9ca..cc3cceea78 100644
--- a/docs/templates/pages/scaffolding.mustache
+++ b/docs/templates/pages/scaffolding.mustache
@@ -5,7 +5,9 @@
         

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

-

{{_i}}Fluid example{{/i}}

+
+
+
+<div class="row">
+  <div class="span12">
+    {{_i}}Level 1 of column{{/i}}
+    <div class="row">
+      <div class="span6">{{_i}}Level 2{{/i}}</div>
+      <div class="span6">{{_i}}Level 2{{/i}}</div>
+    </div>
+  </div>
+</div>
+
+
+
+ + + + + +
+ + +

{{_i}}Fluid columns{{/i}}

+
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
+
+
4
+
4
+
4
+
+
+
4
+
8
+
+
+
6
+
6
+
+
+
12
+
+ +
+
+

{{_i}}Percents, not pixels{{/i}}

+

{{_i}}The fluid grid system uses percents for column widths instead of fixed pixels. It also has the same responsive variations as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.{{/i}}

+
+
+

{{_i}}Fluid rows{{/i}}

+

{{_i}}Make any row fluid simply by changing .row to .row-fluid. The columns stay the exact same, making it super straightforward to flip between fixed and fluid layouts.{{/i}}

+
+
+

{{_i}}Markup{{/i}}

+
+<div class="row-fluid">
+  <div class="span4">...</div>
+  <div class="span8">...</div>
+</div>
+
+
+
+ +

{{_i}}Fluid nesting{{/i}}

+
+

{{_i}}Nesting with fluid grids is a bit different: the number of nested columns doesn't need to match the parent. Instead, your columns are reset at each level because each row takes up 100% of the parent column.{{/i}}

@@ -130,10 +211,10 @@
-<div class="row">
+<div class="row-fluid">
   <div class="span12">
     {{_i}}Level 1 of column{{/i}}
-    <div class="row">
+    <div class="row-fluid">
       <div class="span6">{{_i}}Level 2{{/i}}</div>
       <div class="span6">{{_i}}Level 2{{/i}}</div>
     </div>
@@ -143,7 +224,16 @@
     
-

{{_i}}Grid customization{{/i}}

+
+ + + + +
+
@@ -205,8 +295,8 @@

{{_i}}Fixed layout{{/i}}

{{_i}}The default and simple 940px-wide, centered layout for just about any website or page provided by a single <div class="container">.{{/i}}

-
-
+
+
 <body>
@@ -219,9 +309,9 @@
     

{{_i}}Fluid layout{{/i}}

{{_i}}<div class="container-fluid"> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.{{/i}}

-
-
-
+
+
+
 <div class="container-fluid">
diff --git a/less/mixins.less b/less/mixins.less
index fffb6c1ceb..c2fc2c7458 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -208,13 +208,13 @@
   // Setup the mixins to be used
   .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, @columns) {
     width: 1% * (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
-  } 
+  }
   .gridColumn(@fluidGridGutterWidth) {
     float: left;
     margin-left: @fluidGridGutterWidth;
   }
   // Take these values and mixins, and make 'em do their thang
-  .generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth) {      
+  .generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth) {
     // Row surrounds the columns
     .row-fluid {
       width: 100%;
@@ -228,18 +228,18 @@
         margin-left: 0;
       }
       // Default columns
-      .span1     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 1); }
-      .span2     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 2); }
-      .span3     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 3); }
-      .span4     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 4); }
-      .span5     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 5); }
-      .span6     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 6); }
-      .span7     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 7); }
-      .span8     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 8); }
-      .span9     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 9); }
-      .span10    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 10); }
-      .span11    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 11); }
-      .span12    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 12); }
+      > .span1     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 1); }
+      > .span2     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 2); }
+      > .span3     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 3); }
+      > .span4     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 4); }
+      > .span5     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 5); }
+      > .span6     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 6); }
+      > .span7     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 7); }
+      > .span8     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 8); }
+      > .span9     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 9); }
+      > .span10    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 10); }
+      > .span11    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 11); }
+      > .span12    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 12); }
     }
   }
 }