mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-30 22:52:24 +01:00
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
This commit is contained in:
parent
37cd7b8596
commit
993efebe4f
34
grid.html
34
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 -->
|
||||
|
Loading…
x
Reference in New Issue
Block a user