diff options
| -rw-r--r-- | docs/assets/css/docs.css | 2 | ||||
| -rw-r--r-- | docs/css.html | 1 | ||||
| -rw-r--r-- | docs/examples/grid.html | 22 |
3 files changed, 23 insertions, 2 deletions
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index e389eaf6e..9221cac1b 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -25,7 +25,7 @@ body { color: #fff; } .bs-docs-nav .navbar-nav > li > a { - color: #dfc9c8; + color: #e6cac8; } .bs-docs-nav .navbar-nav > li > a:hover { color: #fff; diff --git a/docs/css.html b/docs/css.html index be4e13098..264d4c672 100644 --- a/docs/css.html +++ b/docs/css.html @@ -67,6 +67,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes." <h3 id="grid-example">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>.col-lg-*</code> elements within a <code>.row</code>. As this is a 12-column grid, each <code>.col-lg-*</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> + <p>Be sure to checkout the <a href="../examples/grid/">full-page grid example</a> as well.</p> <div class="bs-docs-grid"> <div class="row show-grid"> <div class="col col-lg-1">1</div> diff --git a/docs/examples/grid.html b/docs/examples/grid.html index eea2ac0cf..d14602e4e 100644 --- a/docs/examples/grid.html +++ b/docs/examples/grid.html @@ -11,9 +11,16 @@ title: Grid template padding-right: 15px; } + h4 { + margin-top: 25px; + } .row { margin-bottom: 20px; } + .row .row { + margin-top: 10px; + margin-bottom: 0; + } [class*="col-lg-"] { padding-top: 15px; padding-bottom: 15px; @@ -49,6 +56,19 @@ title: Grid template </div> <h4>Full width, single column</h4> - <p class="text-muted">No grid classes are necessary for full-width elements.</p> + <p class="text-warning">No grid classes are necessary for full-width elements.</p> + + <h4>Two columns with two nested columns</h4> + <div class="row"> + <div class="col col-lg-8"> + .col .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> + </div> + <div class="col col-lg-4">.col .col-lg-4</div> + </div> + </div> <!-- /container --> |