From 53135839f549a3278e39f912283b48180a2b6c8c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 9 Sep 2011 10:04:07 -0700 Subject: [PATCH 1/5] adding nested columns to the grid section --- docs/assets/css/docs.css | 10 ++++- docs/index.html | 79 +++++++++++++++++++++++++--------------- 2 files changed, 57 insertions(+), 32 deletions(-) diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index b8ac95c426..31ed82a7fb 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -142,15 +142,21 @@ section > .row { } .show-grid [class*="span"] { background-color: #eee; + background-color: rgba(0,0,0,.1); text-align: center; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; - height: 30px; + min-height: 30px; line-height: 30px; } .show-grid:hover [class*="span"] { - background: rgba(0, 0, 0, 0.25); + background-color: #ddd; + background-color: rgba(0,0,0,.2); +} +.show-grid .show-grid { + margin-top: 0; + margin-bottom: 0; } /* Render mini layout previews -------------------------------------------------- */ diff --git a/docs/index.html b/docs/index.html index 558f3fcf24..083e38b0bf 100644 --- a/docs/index.html +++ b/docs/index.html @@ -196,22 +196,22 @@
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
2
@@ -238,13 +238,13 @@
4
-
1/3
-
1/3
-
1/3
+
1/3
+
1/3
+
1/3
-
1/3
-
2/3
+
1/3
+
2/3
4
@@ -262,25 +262,44 @@
16
-

Offsetting columns

+

Offsetting columns

4
-
8 offset 4
+
8 offset 4
-
1/3 offset 2/3s
+
1/3 offset 2/3s
-
4 offset 4
-
4 offset 4
+
4 offset 4
+
4 offset 4
-
5 offset 3
-
5 offset 3
+
5 offset 3
+
5 offset 3
-
10 offset 6
+
10 offset 6
+ +

Nesting columns

+

Nest your content if you must by creating a .row within an existing column.

+
+
+ Level 1 of column +
+
+ Level 2 +
+
+ Level 2 +
+
+
+
+ Level 1 of column +
+
@@ -1540,4 +1559,4 @@ Lorem ipsum dolar sit amet illo error ipsum verita
- + \ No newline at end of file From dad058326e5aca45161887c246861e64d7192dca Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 9 Sep 2011 16:00:59 -0700 Subject: [PATCH 2/5] add version # to docs --- bootstrap-1.3.0.css | 6 +++--- bootstrap-1.3.0.min.css | 4 ++-- docs/assets/css/docs.css | 4 ++++ docs/index.html | 3 ++- lib/patterns.less | 4 ++-- 5 files changed, 13 insertions(+), 8 deletions(-) diff --git a/bootstrap-1.3.0.css b/bootstrap-1.3.0.css index d7e39b8230..873df4c942 100644 --- a/bootstrap-1.3.0.css +++ b/bootstrap-1.3.0.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: Fri Sep 9 00:02:14 PDT 2011 + * Date: Fri Sep 9 10:06:26 PDT 2011 */ /* Reset.less * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc). @@ -2006,6 +2006,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { box-shadow: inset 0 1px 0 #ffffff; zoom: 1; margin-bottom: 0; + text-align: right; } .modal-footer:before, .modal-footer:after { display: table; @@ -2015,8 +2016,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { clear: both; } .modal-footer .btn { - float: right; - margin-left: 10px; + margin-left: 5px; } .twipsy { display: block; diff --git a/bootstrap-1.3.0.min.css b/bootstrap-1.3.0.min.css index c0153cb1fc..567922a54d 100644 --- a/bootstrap-1.3.0.min.css +++ b/bootstrap-1.3.0.min.css @@ -277,9 +277,9 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .modal{position:fixed;top:50%;left:50%;z-index:2000;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal .close{margin-top:7px;} .modal-header{border-bottom:1px solid #eee;padding:5px 15px;} .modal-body{padding:15px;} -.modal-footer{background-color:#f5f5f5;padding:14px 15px 15px;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;zoom:1;margin-bottom:0;}.modal-footer:before,.modal-footer:after{display:table;content:"";} +.modal-footer{background-color:#f5f5f5;padding:14px 15px 15px;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;zoom:1;margin-bottom:0;text-align:right;}.modal-footer:before,.modal-footer:after{display:table;content:"";} .modal-footer:after{clear:both;} -.modal-footer .btn{float:right;margin-left:10px;} +.modal-footer .btn{margin-left:5px;} .twipsy{display:block;position:absolute;visibility:visible;padding:5px;font-size:11px;z-index:1000;filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}.twipsy.above .twipsy-arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;} .twipsy.left .twipsy-arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;} .twipsy.below .twipsy-arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 31ed82a7fb..536446c234 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -111,6 +111,10 @@ section > .row { margin-bottom: 9px; color: #333; } +.quickstart .current-version, +.quickstart .current-version a { + color: #999; +} .quickstart h6 { color: #999; } diff --git a/docs/index.html b/docs/index.html index 083e38b0bf..4d722d8679 100644 --- a/docs/index.html +++ b/docs/index.html @@ -97,6 +97,7 @@
Fork on GitHub

Download, fork, pull, file issues, and more with the official Bootstrap repo on Github.

Bootstrap on GitHub »

+

Currently v1.2.0

@@ -1275,8 +1276,8 @@

One fine body…

- Primary Secondary + Primary
diff --git a/lib/patterns.less b/lib/patterns.less index f308e5ebf3..0b72054f76 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -771,9 +771,9 @@ input[type=submit].btn { .box-shadow(inset 0 1px 0 #fff); .clearfix(); margin-bottom: 0; + text-align: right; .btn { - float: right; - margin-left: 10px; + margin-left: 5px; } } From c56e229ed73824778c672a67e7e70c4521623fe9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 9 Sep 2011 20:47:38 -0700 Subject: [PATCH 3/5] start updating the grid docs for customizing it --- docs/index.html | 80 +++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 67 insertions(+), 13 deletions(-) diff --git a/docs/index.html b/docs/index.html index 4d722d8679..79f8f3012b 100644 --- a/docs/index.html +++ b/docs/index.html @@ -263,7 +263,10 @@
16
-

Offsetting columns

+ +
+ +

Offsetting columns

4
8 offset 4
@@ -283,22 +286,73 @@
10 offset 6
-

Nesting columns

-

Nest your content if you must by creating a .row within an existing column.

-
-
- Level 1 of column +
+ +
+
+

Nesting columns

+

Nest your content if you must by creating a .row within an existing column.

+
+
+

Example of nested columns

-
- Level 2 -
-
- Level 2 +
+ Level 1 of column +
+
+ Level 2 +
+
+ Level 2 +
+
-
- Level 1 of column +
+ +
+ +
+
+

Roll your own grid

+

Built into Bootstrap are a handful of variables for customizing the default 940px grid system. With a bit of customization, you can modify the size of columns, their gutters, and the container they reside in.

+
+
+

Inside the grid

+

The variables needed to modify the grid system currently all reside in preboot.less.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
VariableDefault valueDescription
@gridColumns16The number of columns within the grid
@gridColumnWidth40pxThe width of each column within the grid
@gridGutterWidth20pxThe negative space between each column
@siteWidthComputed sum of all columns and guttersWe use some basic match to count the number of columns and gutters and set the width of the .fixed-container() mixin.
+

From a0c3d4834225a2dd9fe3f3100b44ea316137c2d9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 9 Sep 2011 21:43:19 -0700 Subject: [PATCH 4/5] fix the stacked form legend style --- bootstrap-1.3.0.css | 4 ++-- bootstrap-1.3.0.min.css | 2 +- docs/index.html | 2 +- lib/forms.less | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/bootstrap-1.3.0.css b/bootstrap-1.3.0.css index 873df4c942..e8024e443a 100644 --- a/bootstrap-1.3.0.css +++ b/bootstrap-1.3.0.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: Fri Sep 9 10:06:26 PDT 2011 + * Date: Fri Sep 9 21:42:21 PDT 2011 */ /* Reset.less * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc). @@ -1012,7 +1012,7 @@ textarea[readonly] { padding-top: 9px; } .form-stacked legend { - margin-left: 0; + padding-left: 0; } .form-stacked label { display: block; diff --git a/bootstrap-1.3.0.min.css b/bootstrap-1.3.0.min.css index 567922a54d..de1d659b35 100644 --- a/bootstrap-1.3.0.min.css +++ b/bootstrap-1.3.0.min.css @@ -160,7 +160,7 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado .inputs-list li:first-child{padding-top:5px;} .inputs-list input[type=radio],.inputs-list input[type=checkbox]{margin-bottom:0;} .form-stacked{padding-left:20px;}.form-stacked fieldset{padding-top:9px;} -.form-stacked legend{margin-left:0;} +.form-stacked legend{padding-left:0;} .form-stacked label{display:block;float:none;width:auto;font-weight:bold;text-align:left;line-height:20px;padding-top:0;} .form-stacked .clearfix{margin-bottom:9px;}.form-stacked .clearfix div.input{margin-left:0;} .form-stacked .inputs-list{margin-bottom:0;}.form-stacked .inputs-list li{padding-top:0;}.form-stacked .inputs-list li label{font-weight:normal;padding-top:0;} diff --git a/docs/index.html b/docs/index.html index 79f8f3012b..f6c6d65b8e 100644 --- a/docs/index.html +++ b/docs/index.html @@ -352,7 +352,7 @@ -

+

Modifying the grid means changing these values and recompiling.

diff --git a/lib/forms.less b/lib/forms.less index 0eae90a73f..3e52875ebc 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -381,7 +381,7 @@ textarea[readonly] { padding-top: @baseline / 2; } legend { - margin-left: 0; + padding-left: 0; } label { display: block; From 0b43bc9bb9266fa8e8d830b82ede20fb3a939acd Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 9 Sep 2011 21:50:41 -0700 Subject: [PATCH 5/5] adding docs for customizing the grid --- docs/index.html | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/docs/index.html b/docs/index.html index f6c6d65b8e..d88e812d17 100644 --- a/docs/index.html +++ b/docs/index.html @@ -352,7 +352,13 @@ -

Modifying the grid means changing these values and recompiling.

+

Now to customize

+

Modifying the grid means changing the three @grid-* variables and recompiling the Less files.

+

Bootstrap comes equipped to handle a grid system with up to 24 columns; the default is just 16. Here's how your grid variables would look customized to a 24-column grid.

+ 
@gridColumns:       24;
+@gridColumnWidth:   20px;
+@gridGutterWidth:   20px;
+

Once recompiled, you'll be set!