From a2b9988eb908e5b95fb253aac7fde0fbd61c375e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 12 Aug 2013 00:28:50 -0700 Subject: Media query (grid and responsive utilities) overhaul Grid classes have been changed to account for a fourth set of classes, meaning we now have XS, S, M, and L options. Specifically, we made the following changes: * Renames `.col-` to `.col-xs-` * Adds `.col-md-` for devices 992px wide and up * Remaps `.col-lg-` for devices 1200px wide and up Alongside that, we've updated our media queries to better handle advanced grid layouts: * All column classes now kick in when they hit a `min-width`, undoing the #9128 fix in https://github.com/twbs/bootstrap/commit/db45a60cc86190a060f0baf0b3961cb c690f3a65 * All column offsets, pushes, and pulls are scoped to an appropriate range, meaning a `min-width` and `max-width` (thanks for the idea, @eratzlaff) We've also modified the widths of our grid containers for the small device grid (now a max 720px instead of 728px) and large device grid (now a max 1140px instead of 1170px) to avoid horizontal scrollbar problems in Firefox (likely due to box-sizing, which is why we didn't see it in 2.x). Similarly, we've updated the responsive ultility classes to match the new four media query approach of the grid system. That means we've: * Added new `.visible-xs` and `.hidden-xs` classes * Reassigns visible and hidden classes for small, medium, and large to matching grid system media queries * Updates docs examples to match grid system and account for fourth utility range ----- Fixes the following: * #9135: fourth grid tier * #9302: undoes previous range change for small grid system, so no need to update any docs here * #8755: consistent grid and responsive utilities schemas) * #9195, #9216, and #9227: no more horizontal scrollbars --- css.html | 284 +++++++++++++++++++++++++++++++++++++-------------------------- 1 file changed, 168 insertions(+), 116 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index eb2c8c64c..984400bee 100644 --- a/css.html +++ b/css.html @@ -117,15 +117,16 @@ base_url: "../" Max container width None (auto) - 728px + 720px 940px - 1170px + 1140px Class prefix - .col- + .col-xs .col-sm- - .col-lg- + .col-md- + .col-lg- # of columns @@ -133,10 +134,10 @@ base_url: "../" Max column width - Auto - ~60px - ~78px - ~98px + Auto + 60px + 78px + 95px Gutter width @@ -161,101 +162,101 @@ base_url: "../"

Example: Stacked-to-horizontal

-

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.

+

Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices.

-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
-
8
-
4
+
8
+
4
-
4
-
4
-
4
+
4
+
4
+
4
-
6
-
6
+
6
+
6
{% highlight html %}
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
-
8
-
4
+
8
+
4
-
4
-
4
-
4
+
4
+
4
+
4
-
6
-
6
+
6
+
6
{% endhighlight %}

Example: Combining mobile with desktop

-

Don't want your columns to simply stack in smaller devices? Use the small device grid system by adding .col-* classes to the existing .col-lg-* ones. See the example below for a better idea of how it all works.

+

Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .col-xs-* .col-md-* to your columns. See the example below for a better idea of how it all works.

-
8
-
4
+
8
+
4
-
4
-
4
-
4
+
4
+
4
+
4
-
6
-
6
+
6
+
6
{% highlight html %}
-
8
-
4
+
8
+
4
-
4
-
4
-
4
+
4
+
4
+
4
-
6
-
6
+
6
+
6
{% endhighlight %} @@ -263,32 +264,32 @@ base_url: "../"

Build on the previous example by creating even more dynamic and powerful layouts with tablet .col-sm-* classes.

-
.col-12 .col-sm-8 .col-lg-8
-
.col-6 .col-sm-4 .col-lg-4
+
.col-xs-12 .col-sm-8 .col-md-8
+
.col-xs-6 .col-sm-4 .col-md-4
-
.col-6 .col-sm-4 .col-lg-4
-
.col-6 .col-sm-4 .col-lg-4
-
.col-6 .col-sm-4 .col-lg-4
+
.col-xs-6 .col-sm-4 .col-md-4
+
.col-xs-6 .col-sm-4 .col-md-4
+
.col-xs-6 .col-sm-4 .col-md-4
-
.col-6 .col-sm-6 .col-lg-6
-
.col-6 .col-sm-6 .col-lg-6
+
.col-xs-6 .col-sm-6 .col-md-6
+
.col-xs-6 .col-sm-6 .col-md-6
{% highlight html %}
-
.col-12 .col-sm-8 .col-lg-8
-
.col-6 .col-sm-4 .col-lg-4
+
.col-xs-12 .col-sm-8 .col-md-8
+
.col-xs-6 .col-sm-4 .col-md-4
-
.col-6 .col-sm-4 .col-lg-4
-
.col-6 .col-sm-4 .col-lg-4
-
.col-6 .col-sm-4 .col-lg-4
+
.col-xs-6 .col-sm-4 .col-md-4
+
.col-xs-6 .col-sm-4 .col-md-4
+
.col-xs-6 .col-sm-4 .col-md-4
-
.col-6 .col-sm-6 .col-lg-6
-
.col-6 .col-sm-6 .col-lg-6
+
.col-xs-6 .col-sm-6 .col-md-6
+
.col-xs-6 .col-sm-6 .col-md-6
{% endhighlight %} @@ -299,45 +300,45 @@ base_url: "../"

Offsetting columns

-

Move columns to the right using .col-lg-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-lg-offset-4 moves .col-lg-4 over four columns.

+

Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-md-offset-4 moves .col-md-4 over four columns.

-
4
-
4 offset 4
+
4
+
4 offset 4
-
3 offset 3
-
3 offset 3
+
3 offset 3
+
3 offset 3
-
6 offset 3
+
6 offset 3
{% highlight html %}
-
...
-
...
+
...
+
...
-
3 offset 3
-
3 offset 3
+
3 offset 3
+
3 offset 3
-
...
+
...
{% endhighlight %}

Nesting columns

-

To nest your content with the default grid, add a new .row and set of .col-lg-* columns within an existing .col-lg-* column. Nested rows should include a set of columns that add up to 12.

+

To nest your content with the default grid, add a new .row and set of .col-md-* columns within an existing .col-md-* column. Nested rows should include a set of columns that add up to 12.

-
+
Level 1: 9 columns
-
+
Level 2: 6 columns
-
+
Level 2: 6 columns
@@ -345,13 +346,13 @@ base_url: "../"
{% highlight html %}
-
+
Level 1: 9 columns
-
+
Level 2: 6 columns
-
+
Level 2: 6 columns
@@ -360,16 +361,16 @@ base_url: "../" {% endhighlight %}

Column ordering

-

Easily change the order of our built-in grid columns with .col-lg-push-* and .col-lg-pull-* modifier classes.

+

Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes.

-
9
-
3
+
9
+
3
{% highlight html %}
-
9
-
3
+
9
+
3
{% endhighlight %} @@ -2014,6 +2015,27 @@ For example, <section> should be wrapped as inline.
+ + + + + + + + + + + + + + + + + @@ -2031,6 +2061,7 @@ For example, <section> should be wrapped as inline. + @@ -2038,10 +2069,21 @@ For example, <section> should be wrapped as inline. + + + + + + + + + + + @@ -2049,6 +2091,7 @@ For example, <section> should be wrapped as inline. + @@ -2056,6 +2099,7 @@ For example, <section> should be wrapped as inline. + @@ -2094,35 +2138,43 @@ For example, <section> should be wrapped as inline.

Resize your browser or load on different devices to test the responsive utility classes.

Visible on...

Green checkmarks indicate the element is visible in your current viewport.

-
    -
  • +
    +
    + + ✔ Visible on x-small +
    +
    ✔ Visible on small -
    • -
  • + +
    Medium ✔ Visible on medium -
    • -
  • + +
    ✔ Visible on large -
    • -
+ +

Hidden on...

Here, green checkmarks indicate the element is hidden in your current viewport.

-
    -
  • +
    +
    + Extra small + +
    +
    Small -
    • -
  • + +
    Medium ✔ Hidden on medium -
    • -
  • + +
    Large -
    • -
+ + -- cgit v1.2.3
+ Extra small devices + Phones (<768px) + + Small devices + Tablets (>768px) + + Medium devices + Desktops (>992px) + + Large devices + Desktops (>1200px) +
.visible-xsVisible
.visible-sm Visible
.visible-md Visible
.visible-lg Visible
.hidden-xsVisibleVisible Visible
.hidden-smVisible Visible Visible
.hidden-md VisibleVisible Visible
.hidden-lg Visible VisibleVisible