From 2a43e7e78a59c70e217383c12c9ef0482cabb163 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 16 Mar 2014 19:03:53 -0700 Subject: Break up docs into includes --- docs/_includes/css/responsive-utilities.html | 258 +++++++++++++++++++++++++++ 1 file changed, 258 insertions(+) create mode 100644 docs/_includes/css/responsive-utilities.html (limited to 'docs/_includes/css/responsive-utilities.html') diff --git a/docs/_includes/css/responsive-utilities.html b/docs/_includes/css/responsive-utilities.html new file mode 100644 index 000000000..260eea3cc --- /dev/null +++ b/docs/_includes/css/responsive-utilities.html @@ -0,0 +1,258 @@ +
+

Responsive utilities

+ +

For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.

+

Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.

+ + +

Available classes

+

Use a single or combination of the available classes for toggling content across viewport breakpoints.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Extra small devices + Phones (<768px) + + Small devices + Tablets (≥768px) + + Medium devices + Desktops (≥992px) + + Large devices + Desktops (≥1200px) +
.visible-xs-*Visible
.visible-sm-*Visible
.visible-md-*Visible
.visible-lg-*Visible
.hidden-xsVisibleVisibleVisible
.hidden-smVisibleVisibleVisible
.hidden-mdVisibleVisibleVisible
.hidden-lgVisibleVisibleVisible
+
+ +

As of v3.2, the .visible-*-* classes for each breakpoint come in three variations, one for each CSS display property value listed below.

+
+ + + + + + + + + + + + + + + + + + + + + +
Group of classesCSS display
.visible-*-blockdisplay: block;
.visible-*-inlinedisplay: inline;
.visible-*-inline-blockdisplay: inline-block;
+
+

So, for extra small (xs) screens for example, the available .visible-*-* classes are: .visible-xs-block, .visible-xs-inline, and .visible-xs-inline-block.

+

The classes .visible-xs, .visible-sm, .visible-md, and .visible-lg also exist, but are deprecated as of v3.2. They are approximately equivalent to .visible-*-block, except with additional special cases for toggling <table>-related elements.

+ +

Print classes

+

Similar to the regular responsive classes, use these for toggling content for print.

+
+ + + + + + + + + + + + + + + + + + + + +
ClassesBrowserPrint
+ .visible-print-block
+ .visible-print-inline
+ .visible-print-inline-block + 		Visible
.hidden-printVisible
+
+

The class .visible-print also exists but is deprecated as of v3.1.0. It is approximately equivalent to .visible-print-block, except with additional special cases for <table>-related elements.

+ + +

Test cases

+

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 +
+
+
+
+ + ✔ Visible on x-small and small +
+
+ + ✔ Visible on medium and large +
+
+
+ + ✔ Visible on x-small and medium +
+
+ + ✔ Visible on small and large +
+
+
+ + ✔ Visible on x-small and large +
+
+ + ✔ Visible on small and medium +
+
+ +

Hidden on...

+

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

+
+
+ + ✔ Hidden on x-small +
+
+ + ✔ Hidden on small +
+
+
+ Medium + ✔ Hidden on medium +
+
+ + ✔ Hidden on large +
+
+
+
+ + ✔ Hidden on x-small and small +
+
+ + ✔ Hidden on medium and large +
+
+
+ + ✔ Hidden on x-small and medium +
+
+ + ✔ Hidden on small and large +
+
+
+ + ✔ Hidden on x-small and large +
+
+ + ✔ Hidden on small and medium +
+
+
-- cgit v1.2.3