diff options
| author | Ivan Khalopik <[email protected]> | 2013-06-10 10:31:51 +0300 |
|---|---|---|
| committer | Ivan Khalopik <[email protected]> | 2013-06-10 10:31:51 +0300 |
| commit | e138b0df3a1bcd536cc312d7c4714ff5bc9acd2b (patch) | |
| tree | 2d6f41184d19466d6f9fa016ba521260413435cb /docs/examples/grid.html | |
| parent | 3285f4c3062f4a56eaed2461a3128a2e6a3ba9cc (diff) | |
| parent | d74a9634b0cb21a712f5e805c7a21132dc9bee5e (diff) | |
| download | bootstrap-e138b0df3a1bcd536cc312d7c4714ff5bc9acd2b.tar.xz bootstrap-e138b0df3a1bcd536cc312d7c4714ff5bc9acd2b.zip | |
Merge remote-tracking branch 'bootstrap/3.0.0-wip' into 3.0.0-wip
Diffstat (limited to 'docs/examples/grid.html')
| -rw-r--r-- | docs/examples/grid.html | 60 |
1 files changed, 45 insertions, 15 deletions
diff --git a/docs/examples/grid.html b/docs/examples/grid.html index d14602e4e..14e8ecdf6 100644 --- a/docs/examples/grid.html +++ b/docs/examples/grid.html @@ -24,8 +24,8 @@ title: Grid template [class*="col-lg-"] { padding-top: 15px; padding-bottom: 15px; - background-color: #f5f5f5; - border: 1px solid #e5e5e5; + background-color: rgba(185,74,72,.15); + border: 1px solid rgba(185,74,72,.2); } </style> @@ -37,22 +37,22 @@ title: Grid template <h4>Three equal columns</h4> <div class="row"> - <div class="col col-lg-4">.col .col-lg-4</div> - <div class="col col-lg-4">.col .col-lg-4</div> - <div class="col col-lg-4">.col .col-lg-4</div> + <div class="col-lg-4">.col-lg-4</div> + <div class="col-lg-4">.col-lg-4</div> + <div class="col-lg-4">.col-lg-4</div> </div> <h4>Three unequal columns</h4> <div class="row"> - <div class="col col-lg-3">.col .col-lg-3</div> - <div class="col col-lg-6">.col .col-lg-6</div> - <div class="col col-lg-3">.col .col-lg-3</div> + <div class="col-lg-3">.col-lg-3</div> + <div class="col-lg-6">.col-lg-6</div> + <div class="col-lg-3">.col-lg-3</div> </div> <h4>Two columns</h4> <div class="row"> - <div class="col col-lg-8">.col .col-lg-8</div> - <div class="col col-lg-4">.col .col-lg-4</div> + <div class="col-lg-8">.col-lg-8</div> + <div class="col-lg-4">.col-lg-4</div> </div> <h4>Full width, single column</h4> @@ -60,14 +60,44 @@ title: Grid template <h4>Two columns with two nested columns</h4> <div class="row"> - <div class="col col-lg-8"> - .col .col-lg-8 + <div class="col-lg-8"> + .col-lg-8 <div class="row"> - <div class="col col-lg-6">.col .col-lg-6</div> - <div class="col col-lg-6">.col .col-lg-6</div> + <div class="col-lg-6">.col-lg-6</div> + <div class="col-lg-6">.col-lg-6</div> </div> </div> - <div class="col col-lg-4">.col .col-lg-4</div> + <div class="col-lg-4">.col-lg-4</div> + </div> + + <h4>Mixed: mobile and desktop</h4> + <div class="row"> + <div class="col-12 col-lg-8">.col-12 .col-lg-8</div> + <div class="col-6 col-lg-4">.col-6 .col-lg-4</div> + </div> + <div class="row"> + <div class="col-6 col-lg-4">.col-6 .col-lg-4</div> + <div class="col-6 col-lg-4">.col-6 .col-lg-4</div> + <div class="col-6 col-lg-4">.col-6 .col-lg-4</div> + </div> + <div class="row"> + <div class="col-6 col-lg-6">.col-6 .col-lg-6</div> + <div class="col-6 col-lg-6">.col-6 .col-lg-6</div> + </div> + + <h4>Mixed: mobile, tablet, and desktop</h4> + <div class="row"> + <div class="col-12 col-sm-8 col-lg-8">.col-12 .col-lg-8</div> + <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div> + </div> + <div class="row"> + <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div> + <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div> + <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div> + </div> + <div class="row"> + <div class="col-6 col-sm-6 col-lg-6">.col-6 .col-lg-6</div> + <div class="col-6 col-sm-6 col-lg-6">.col-6 .col-lg-6</div> </div> |