From 145eb054d9aac82977a339c0253e7bec6ad111d5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 15 Mar 2013 21:57:16 -0700 Subject: [PATCH] begin to rewrite the grid docs --- docs/css.html | 31 +++++++++++++++++++++++-------- 1 file changed, 23 insertions(+), 8 deletions(-) diff --git a/docs/css.html b/docs/css.html index bbf90364a3..fd6faa1734 100644 --- a/docs/css.html +++ b/docs/css.html @@ -472,9 +472,10 @@ title: CSS

Grid system

+

Bootstrap utilizes a responsive, percent-based grid system, that scales up appropriately as devices and viewport sizes increase. In other words, it's mobile first.

-

Live grid example

-

The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.

+

Grid example

+

On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply floats and widths. To create a basic grid layout, wrap a series of .span* elements within a .row. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent), even at mobile resolutions.

1
@@ -500,18 +501,32 @@ title: CSS
6
- -

Basic grid HTML

-

For a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).

{% highlight html linenos %}
-
8
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
+
+
4
+
4
4
+
+
6
+
6
+
{% endhighlight %} -

Given this example, we have .span4 and .span8, making for 12 total columns and a complete row.

-

Offsetting columns

Move columns to the right using .offset* classes. Each class increases the left margin of a column by a whole column. For example, .offset4 moves .span4 over four columns.