diff options
| author | Mark Otto <[email protected]> | 2013-06-09 23:43:43 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2013-06-09 23:43:43 -0700 |
| commit | 0a18d33d2c1600c9d5133127dac4db2f690df71a (patch) | |
| tree | ea8edc325fc41233a1b49955227ece87f5d9af16 /docs/examples/grid.html | |
| parent | eb21410cc8ad61db1656445d1e74e9e2937229d5 (diff) | |
| download | bootstrap-0a18d33d2c1600c9d5133127dac4db2f690df71a.tar.xz bootstrap-0a18d33d2c1600c9d5133127dac4db2f690df71a.zip | |
Redo grid documentation
* Update example sections to include basic, mobile-desktop, and mobile-tablet-desktop implementations
* Add more examples to the grid example page
* Red columns instead of gray for more Bootstrapy aesthetic
Diffstat (limited to 'docs/examples/grid.html')
| -rw-r--r-- | docs/examples/grid.html | 34 |
1 files changed, 32 insertions, 2 deletions
diff --git a/docs/examples/grid.html b/docs/examples/grid.html index 98dd760da..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> @@ -70,5 +70,35 @@ title: Grid template <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> + </div> <!-- /container --> |