diff options
| author | Mark Otto <[email protected]> | 2013-04-02 19:40:43 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2013-04-02 19:40:43 -0700 |
| commit | eadfa59d92ad8bd898b2586056fbbf55906e1420 (patch) | |
| tree | dd23df4f033dfc40a769a76210cb76a3bddb4136 /docs/docs.html | |
| parent | 610eb8fb78952ad3b1b43df2362bcfef9b223a01 (diff) | |
| download | bootstrap-eadfa59d92ad8bd898b2586056fbbf55906e1420.tar.xz bootstrap-eadfa59d92ad8bd898b2586056fbbf55906e1420.zip | |
Add small grid for phones and tablets
Diffstat (limited to 'docs/docs.html')
| -rw-r--r-- | docs/docs.html | 23 |
1 files changed, 20 insertions, 3 deletions
diff --git a/docs/docs.html b/docs/docs.html index 517b81cfa..73c81ff40 100644 --- a/docs/docs.html +++ b/docs/docs.html @@ -321,6 +321,8 @@ title: Bootstrap Documentation <p>For improved cross-browser rendering, we use <a href="http://necolas.github.com/normalize.css/" target="_blank">Normalize</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> and <a href="http://twitter.com/jon_neal" target="_blank">Jonathan Neal</a>.</p> </div> + + <!-- Grid system ================================================== --> <div class="bs-docs-section" id="grid"> @@ -438,15 +440,30 @@ title: Bootstrap Documentation <h3 id="grid-column-ordering">Column ordering</h3> <p>Easily change the order of our built-in grid columns with <code>.push*</code> and <code>.pull*</code> modifier classes.</p> + <div class="row show-grid"> + <div class="col-span-9 col-push-3">9</div> + <div class="col-span-3 col-pull-9">3</div> + </div> + +{% highlight html linenos %} <div class="row show-grid"> <div class="col-span-9 col-push-3">9</div> <div class="col-span-3 col-pull-9">3</div> </div> +{% endhighlight %} + <h3 id="grid-small">Small device grid</h3> + <p>Use the small device grid classes, like <code>.col-small-span-6</code>, to create columned layouts on phone and tablet devices (anything under 768px). Offsets, pushes, and pulls are not available with the small grid at this time.</p> + <div class="row show-grid"> + <div class="col-span-4 col-small-span-6">4 cols, 6 small cols</div> + <div class="col-span-4 col-small-span-6">4 cols, 6 small cols</div> + <div class="col-span-4 col-small-span-12">4 cols, 12 small cols</div> + </div> {% highlight html linenos %} -<div class="row show-grid"> - <div class="col-span-9 col-push-3">9</div> - <div class="col-span-3 col-pull-9">3</div> +<div class="row"> + <div class="col-span-4 col-small-span-6">4 cols, 6 small cols</div> + <div class="col-span-4 col-small-span-6">4 cols, 6 small cols</div> + <div class="col-span-4 col-small-span-12">4 cols, 12 small cols</div> </div> {% endhighlight %} |