diff options
author | Mark Otto <otto@github.com> | 2013-03-16 08:57:16 +0400 |
---|---|---|
committer | Mark Otto <otto@github.com> | 2013-03-16 08:57:16 +0400 |
commit | 145eb054d9aac82977a339c0253e7bec6ad111d5 (patch) | |
tree | 90ca4d55dd20099d33953cd82d766963c81638c7 /docs | |
parent | 2a0fb08fad2e7ffff3aba2f9c406c7fd44db31b0 (diff) |
begin to rewrite the grid docs
Diffstat (limited to 'docs')
-rw-r--r-- | docs/css.html | 31 |
1 files 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 <div class="page-header"> <h1>Grid system</h1> </div> + <p class="lead">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.</p> - <h2>Live grid example</h2> - <p>The default Bootstrap grid system utilizes <strong>12 columns</strong>, making for a 940px wide container without <a href="./scaffolding.html#responsive">responsive features</a> 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.</p> + <h3>Grid example</h3> + <p>On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply <code>float</code>s and <code>width</code>s. To create a basic grid layout, wrap a series of <code>.span*</code> elements within a <code>.row</code>. As this is a 12-column grid, each <code>.span*</code> 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.</p> <div class="bs-docs-grid"> <div class="row show-grid"> <div class="span1">1</div> @@ -500,18 +501,32 @@ title: CSS <div class="span6">6</div> </div> </div> - - <h3>Basic grid HTML</h3> - <p>For a simple two column layout, create a <code>.row</code> and add the appropriate number of <code>.span*</code> columns. As this is a 12-column grid, each <code>.span*</code> 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).</p> {% highlight html linenos %} <div class="row"> - <div class="span8">8</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> +</div> +<div class="row"> + <div class="span4">4</div> <div class="span4">4</div> + <div class="span4">4</div> +</div> +<div class="row"> + <div class="span6">6</div> + <div class="span6">6</div> </div> {% endhighlight %} - <p>Given this example, we have <code>.span4</code> and <code>.span8</code>, making for 12 total columns and a complete row.</p> - <h2>Offsetting columns</h2> <p>Move columns to the right using <code>.offset*</code> classes. Each class increases the left margin of a column by a whole column. For example, <code>.offset4</code> moves <code>.span4</code> over four columns.</p> <div class="bs-docs-grid"> |