Skip to content
GitLab
Commit 0a18d33d authored by Mark Otto's avatar Mark Otto
Browse files

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
parent eb21410c
Hide whitespace changes
Inline Side-by-side
Showing
with 123 additions and 25 deletions
+123 -25
docs/_includes/nav-css.html
+ 3
- 1
View file @ 0a18d33d
......@@ -13,7 +13,9 @@
<a href="#grid">Grid system</a>
<ul class="nav">
<li><a href="#grid-options">Available options</a></li>
<li><a href="#grid-example">Example usage</a></li>
<li><a href="#grid-example-basic">Ex: Stacked-to-horizonal</a></li>
<li><a href="#grid-example-mixed">Ex: Mobile-desktop</a></li>
<li><a href="#grid-example-mixed-complete">Ex: Mobile, tablet, desktop</a></li>
<li><a href="#grid-offsetting">Offset columns</a></li>
<li><a href="#grid-nesting">Nested columns</a></li>
<li><a href="#grid-column-ordering">Column ordering</a></li>
......
docs/assets/css/docs.css
+ 4
- 0
View file @ 0a18d33d
......@@ -251,9 +251,13 @@ body {
padding-bottom: 10px;
background-color: #eee;
border: 1px solid #ddd;
/* Todo: reconcile these */
background-color: rgba(185,74,72,.15);
border: 1px solid rgba(185,74,72,.2);
}
.show-grid [class^="col-"]:hover {
background-color: #ddd;
background-color: rgba(185,74,72,.25);
}
......
docs/css.html
+ 84
- 22
View file @ 0a18d33d
......@@ -63,10 +63,10 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<div class="page-header">
<h1>Grid system</h1>
</div>
<p class="lead">Bootstrap includes a responsive, mobile-first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes <a href="#grid-example">predefined classes</a> for easy layout options, as well as powerful <a href="#grid-less">mixins for generating more semantic layouts</a>.</p>
<p class="lead">Bootstrap includes a responsive, mobile-first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes <a href="#grid-example-basic">predefined classes</a> for easy layout options, as well as powerful <a href="#grid-less">mixins for generating more semantic layouts</a>.</p>
<h3 id="grid-options">Grid options</h3>
<p>Multiple device grids, columns, offsets, and column ordering.</p>
<p>See how aspects of the Bootstrap grid system work across multiple devices with a handy table.</p>
<table class="table table-bordered table-striped bs-table">
<thead>
<tr>
......@@ -118,11 +118,8 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
</tbody>
</table>
<h3 id="grid-examples">Grid examples</h3>
<p>Bootstrap's grid system includes three levels of column sizing&mdash;phone, tablet, and desktop and up. Use each level in conjunction with the others for more control, or stick to the desktop classes for single-column, stacked mobile views.</p>
<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>
<h3 id="grid-example-basic">Example: Stacked-to-horizontal</h3>
<p>Using a single set of grid classes, you can create a basic grid system that starts out stacked on mobile and tablet devices before becoming horizontal on desktop devices.</p>
<div class="bs-docs-grid">
<div class="row show-grid">
<div class="col-lg-1">1</div>
......@@ -138,6 +135,10 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
</div>
<div class="row show-grid">
<div class="col-lg-8">8</div>
<div class="col-lg-4">4</div>
</div>
<div class="row show-grid">
<div class="col-lg-4">4</div>
<div class="col-lg-4">4</div>
......@@ -163,6 +164,10 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
</div>
<div class="row show-grid">
<div class="col-lg-8">8</div>
<div class="col-lg-4">4</div>
</div>
<div class="row">
<div class="col-lg-4">4</div>
<div class="col-lg-4">4</div>
......@@ -174,6 +179,78 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
</div>
{% endhighlight %}
<h3 id="grid-example-mixed">Example: Combining mobile with desktop</h3>
<p>Don't want your columns to simply stack in smaller devices? Use the small device grid system by adding <code>.col-*</code> classes to the existing <code>.col-lg-*</code> ones. See the example below for a better idea of how it all works.</p>
<div class="bs-docs-grid">
<div class="row show-grid">
<div class="col-12 col-lg-8">8</div>
<div class="col-6 col-lg-4">4</div>
</div>
<div class="row show-grid">
<div class="col-6 col-lg-4">4</div>
<div class="col-6 col-lg-4">4</div>
<div class="col-6 col-lg-4">4</div>
</div>
<div class="row show-grid">
<div class="col-6 col-lg-6">6</div>
<div class="col-6 col-lg-6">6</div>
</div>
</div>
{% highlight html %}
<div class="row">
<div class="col-12 col-lg-8">8</div>
<div class="col-6 col-lg-4">4</div>
</div>
<div class="row">
<div class="col-6 col-lg-4">4</div>
<div class="col-6 col-lg-4">4</div>
<div class="col-6 col-lg-4">4</div>
</div>
<div class="row">
<div class="col-6 col-lg-6">6</div>
<div class="col-6 col-lg-6">6</div>
</div>
{% endhighlight %}
<h3 id="grid-example-mixed-complete">Example: Mobile, tablet, and desktop</h3>
<p>Build on the previous example by creating even more dynamic and powerful layouts with tablet <code>.col-sm-*</code> classes.</p>
<div class="bs-docs-grid">
<div class="row show-grid">
<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 show-grid">
<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 show-grid">
<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>
{% highlight html %}
<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>
{% endhighlight %}
<div class="bs-callout">
<h4>Need more examples?</h4>
<p>We dive into more grid layouts in a separte page, free of chrome and documentation to better show you the power of the grid.</p>
<p><a class="btn btn-danger" target="_blank" href="../examples/grid/">More grid examples</a></p>
</div>
<h3 id="grid-offsetting">Offsetting columns</h3>
<p>Move columns to the right using <code>.col-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-offset-4</code> moves <code>.col-lg-4</code> over four columns.</p>
<div class="bs-docs-grid">
......@@ -247,21 +324,6 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<div class="col-lg-9 col-push-3">9</div>
<div class="col-lg-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-sm-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-sm-6 col-lg-4">6 small cols, 4 large cols</div>
<div class="col-sm-6 col-lg-4">6 small cols, 4 large cols</div>
<div class="col-sm-12 col-lg-4">12 small cols, 4 large cols</div>
</div>
{% highlight html %}
<div class="row">
<div class="col-sm-6 col-lg-4">6 small cols, 4 large cols</div>
<div class="col-sm-6 col-lg-4">6 small cols, 4 large cols</div>
<div class="col-sm-12 col-lg-4">12 small cols, 4 large cols</div>
</div>
{% endhighlight %}
<h3 id="grid-less">LESS mixins and variables</h3>
......
docs/examples/grid.html
+ 32
- 2
View file @ 0a18d33d
......@@ -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 -->
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment