From: Mark Otto Date: Sat, 8 Jun 2013 21:04:16 +0000 (-0230) Subject: Another grid update X-Git-Tag: v3.0.0-rc1~295 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=441bbe1998c790dad1c4d44c5f85e6360209eaac;p=thirdparty%2Fbootstrap.git Another grid update * 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 --- diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 8642bf95db..4d65d053bd 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -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; } diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 6a608b4da8..811961d609 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -520,6 +520,7 @@ body { /* Utility classes table ------------------------- */ +.bs-table th small, .responsive-utilities th small { display: block; font-weight: normal; diff --git a/docs/css.html b/docs/css.html index 981626c607..dfab315230 100644 --- a/docs/css.html +++ b/docs/css.html @@ -63,9 +63,64 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."

Grid system

-

Bootstrap includes a responsive, percent-based grid system that appropriately scales up to 12 columns as the device or viewport size increases—in other words, it's mobile first. It includes predefined classes for this, as well as powerful mixins for generating semantic layouts.

+

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 predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

+ +

Grid options

+

Multiple device grids, columns, offsets, and column ordering.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Tiny grid + Phones (<480px) + + Small grid + Tablets (<768px) + + Medium-large grid + Destkops (>768px) +
Grid behaviorHorizontal at all timesCollapsed to start, horizontal above breakpoints
Class prefix.col-.col-sm-.col-lg-
# of columns12
NestableYes
OffsetsN/AYes
Column orderingN/AYes
+ +

Grid examples

+

Bootstrap's grid system includes three levels of column sizing—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.

-

Grid example

On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply floats and widths. To create a basic grid layout, wrap a series of .col-lg-* elements within a .row. As this is a 12-column grid, each .col-lg-* 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.

Be sure to checkout the full-page grid example as well.

diff --git a/less/grid.less b/less/grid.less index bb99dff7e1..b97d1d5c4a 100644 --- a/less/grid.less +++ b/less/grid.less @@ -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; }