rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-18 10:52:19 +01:00
Code Issues Actions Packages Releases Activity

Another grid update

Browse Source 
* Update docs to include table of grid levels and behaviors
* Change from .col-md to .col-sm to match existing size variables we use elsewhere
* Keep .col-lg as-is though for simplicity as we won't likely add a fourth level of the grid
* Combine responsive .container breakpoints with grid breakpoints in grid.less
* Other misc docs updates
This commit is contained in:
Mark Otto 2013-06-08 18:34:16 -02:30
parent b1cc11cd98
commit 441bbe1998
4 changed files with 130 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
docs/assets/css/bootstrap.css vendored
View File

@ -787,6 +787,18 @@ pre code {
.col-10,
.col-11,
.col-12,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-lg-1,
.col-lg-2,
.col-lg-3,
@ -856,40 +868,43 @@ pre code {
}
@media (min-width: 768px) {
.col-md-1 {
.container {
max-width: 728px;
}
.col-sm-1 {
width: 8.333333333333332%;
}
.col-md-2 {
.col-sm-2 {
width: 16.666666666666664%;
}
.col-md-3 {
.col-sm-3 {
width: 25%;
}
.col-md-4 {
.col-sm-4 {
width: 33.33333333333333%;
}
.col-md-5 {
.col-sm-5 {
width: 41.66666666666667%;
}
.col-md-6 {
.col-sm-6 {
width: 50%;
}
.col-md-7 {
.col-sm-7 {
width: 58.333333333333336%;
}
.col-md-8 {
.col-sm-8 {
width: 66.66666666666666%;
}
.col-md-9 {
.col-sm-9 {
width: 75%;
}
.col-md-10 {
.col-sm-10 {
width: 83.33333333333334%;
}
.col-md-11 {
.col-sm-11 {
width: 91.66666666666666%;
}
.col-md-12 {
.col-sm-12 {
width: 100%;
}
.col-offset-1 {
@ -994,6 +1009,9 @@ pre code {
}
@media (min-width: 992px) {
.container {
max-width: 940px;
}
.col-lg-1 {
width: 8.333333333333332%;
}
@ -1032,19 +1050,7 @@ pre code {
}
}
@media screen and (min-width: 768px) {
.container {
max-width: 728px;
}
}
@media screen and (min-width: 992px) {
.container {
max-width: 940px;
}
}
@media screen and (min-width: 1200px) {
@media (min-width: 1200px) {
.container {
max-width: 1170px;
}

1
docs/assets/css/docs.css
View File

@ -520,6 +520,7 @@ body {
/* Utility classes table
------------------------- */
.bs-table th small,
.responsive-utilities th small {
display: block;
font-weight: normal;

59
docs/css.html
View File

@ -63,9 +63,64 @@ 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, percent-based grid system that appropriately scales up to 12 columns as the device or viewport size increases&mdash;in other words, it's mobile first. It includes <a href="#grid-example">predefined classes</a> for this, as well as powerful <a href="#grid-less">mixins for generating 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">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>
<table class="table table-bordered table-striped bs-table">
<thead>
<tr>
<th></th>
<th>
Tiny grid
<small>Phones (&lt;480px)</small>
</th>
<th>
Small grid
<small>Tablets (&lt;768px)</small>
</th>
<th>
Medium-large grid
<small>Destkops (&gt;768px)</small>
</th>
</tr>
</thead>
<tbody>
<tr>
<th>Grid behavior</th>
<td>Horizontal at all times</td>
<td colspan="2">Collapsed to start, horizontal above breakpoints</td>
</tr>
<tr>
<th>Class prefix</th>
<td><code>.col-</code></td>
<td><code>.col-sm-</code></td>
<td><code>.col-lg-</code></td>
</tr>
<tr>
<th># of columns</th>
<td colspan="3">12</td>
</tr>
<tr>
<th>Nestable</th>
<td colspan="3">Yes</td>
</tr>
<tr>
<th>Offsets</th>
<td class="text-muted">N/A</td>
<td colspan="2">Yes</td>
</tr>
<tr>
<th>Column ordering</th>
<td class="text-muted">N/A</td>
<td colspan="2">Yes</td>
</tr>
</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>
<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">

73
less/grid.less
View File

@ -26,6 +26,18 @@
.col-10,
.col-11,
.col-12,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-lg-1,
.col-lg-2,
.col-lg-3,
@ -49,9 +61,13 @@
padding-right: (@grid-gutter-width / 2);
}
// Grid column sizing
// Small columns (phones and up)
//
// Container and grid column sizing
//
// Tiny device columns (smartphones)
.col-1 { width: percentage((1 / @grid-columns)); }
.col-2 { width: percentage((2 / @grid-columns)); }
.col-3 { width: percentage((3 / @grid-columns)); }
@ -65,20 +81,24 @@
.col-11 { width: percentage((11/ @grid-columns)); }
.col-12 { width: 100%; }
// Medium columns (tablets and up)
// Small device columns (phones to tablets)
@media (min-width: @screen-tablet) {
.col-md-1 { width: percentage((1 / @grid-columns)); }
.col-md-2 { width: percentage((2 / @grid-columns)); }
.col-md-3 { width: percentage((3 / @grid-columns)); }
.col-md-4 { width: percentage((4 / @grid-columns)); }
.col-md-5 { width: percentage((5 / @grid-columns)); }
.col-md-6 { width: percentage((6 / @grid-columns)); }
.col-md-7 { width: percentage((7 / @grid-columns)); }
.col-md-8 { width: percentage((8 / @grid-columns)); }
.col-md-9 { width: percentage((9 / @grid-columns)); }
.col-md-10 { width: percentage((10/ @grid-columns)); }
.col-md-11 { width: percentage((11/ @grid-columns)); }
.col-md-12 { width: 100%; }
.container {
max-width: @container-tablet;
}
.col-sm-1 { width: percentage((1 / @grid-columns)); }
.col-sm-2 { width: percentage((2 / @grid-columns)); }
.col-sm-3 { width: percentage((3 / @grid-columns)); }
.col-sm-4 { width: percentage((4 / @grid-columns)); }
.col-sm-5 { width: percentage((5 / @grid-columns)); }
.col-sm-6 { width: percentage((6 / @grid-columns)); }
.col-sm-7 { width: percentage((7 / @grid-columns)); }
.col-sm-8 { width: percentage((8 / @grid-columns)); }
.col-sm-9 { width: percentage((9 / @grid-columns)); }
.col-sm-10 { width: percentage((10/ @grid-columns)); }
.col-sm-11 { width: percentage((11/ @grid-columns)); }
.col-sm-12 { width: 100%; }
// Offsets
.col-offset-1 { margin-left: percentage((1 / @grid-columns)); }
@ -119,8 +139,11 @@
.col-pull-11 { right: percentage((11/ @grid-columns)); }
}
// Medium and large device columns (desktop and up)
@media (min-width: @screen-desktop) {
// Large columns (desktop and up)
.container {
max-width: @container-desktop;
}
.col-lg-1 { width: percentage((1 / @grid-columns)); }
.col-lg-2 { width: percentage((2 / @grid-columns)); }
.col-lg-3 { width: percentage((3 / @grid-columns)); }
@ -135,22 +158,8 @@
.col-lg-12 { width: 100%; }
}
// Responsive: Tablets and up
@media screen and (min-width: @screen-tablet) {
.container {
max-width: @container-tablet;
}
}
// Responsive: Desktops and up
@media screen and (min-width: @screen-desktop) {
.container {
max-width: @container-desktop;
}
}
// Responsive: Large desktops and up
@media screen and (min-width: @screen-large-desktop) {
// Large desktops and up
@media (min-width: @screen-large-desktop) {
.container {
max-width: @container-large-desktop;
}