mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-23 20:40:36 +03:00
Code Activity

make it a thing

Browse Source
This commit is contained in:
Mark Otto
2014-07-11 23:19:46 -07:00
parent dad3cab24f
commit 3753390242
1 changed files with 252 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/layout/responsive-utilities.md
+38 -30
View File
@@ -1,13 +1,17 @@
<div class="bs-docs-section">
<h1 id="responsive-utilities" class="page-header">Responsive utilities</h1>
---
layout: page
title: Responsive utilities
---
<p class="lead">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.</p>
<p>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.</p>
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.
<h2 id="responsive-utilities-classes">Available classes</h2>
<p>Use a single or combination of the available classes for toggling content across viewport breakpoints.</p>
<div class="table-responsive">
## Available classes
Use a single or combination of the available classes for toggling content across viewport breakpoints.
<div class="table-responsive">
<table class="table table-bordered table-striped responsive-utilities">
<thead>
<tr>
@@ -91,10 +95,11 @@
</tr>
</tbody>
</table>
</div>
</div>
<p>As of v3.2.0, the <code>.visible-*-*</code> classes for each breakpoint come in three variations, one for each CSS <code>display</code> property value listed below.</p>
<div class="table-responsive">
As of v3.2.0, the `.visible-*-*` classes for each breakpoint come in three variations, one for each CSS `display` property value listed below.
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
@@ -117,12 +122,12 @@
</tr>
</tbody>
</table>
</div>
<p>So, for extra small (<code>xs</code>) screens for example, the available <code>.visible-*-*</code> classes are: <code>.visible-xs-block</code>, <code>.visible-xs-inline</code>, and <code>.visible-xs-inline-block</code>.</p>
</div>
<p>So, for extra small (<code>xs</code>) screens for example, the available <code>.visible-*-*</code> classes are: <code>.visible-xs-block</code>, <code>.visible-xs-inline</code>, and <code>.visible-xs-inline-block</code>.</p>
<h2 id="responsive-utilities-print">Print classes</h2>
<p>Similar to the regular responsive classes, use these for toggling content for print.</p>
<div class="table-responsive">
<h2 id="responsive-utilities-print">Print classes</h2>
<p>Similar to the regular responsive classes, use these for toggling content for print.</p>
<div class="table-responsive">
<table class="table table-bordered table-striped responsive-utilities">
<thead>
<tr>
@@ -148,15 +153,17 @@
</tr>
</tbody>
</table>
</div>
</div>
## Test cases
<h2 id="responsive-utilities-tests">Test cases</h2>
<p>Resize your browser or load on different devices to test the responsive utility classes.</p>
Resize your browser or load on different devices to test the responsive utility classes.
<h3>Visible on...</h3>
<p>Green checkmarks indicate the element <strong>is visible</strong> in your current viewport.</p>
<div class="row responsive-utilities-test visible-on">
### Visible on...
Green checkmarks indicate the element **is visible** in your current viewport.
<div class="row responsive-utilities-test visible-on">
<div class="col-xs-6 col-sm-3">
<span class="hidden-xs">Extra small</span>
<span class="visible-xs-block">&#10004; Visible on x-small</span>
@@ -174,8 +181,8 @@
<span class="hidden-lg">Large</span>
<span class="visible-lg-block">&#10004; Visible on large</span>
</div>
</div>
<div class="row responsive-utilities-test visible-on">
</div>
<div class="row responsive-utilities-test visible-on">
<div class="col-xs-6 col-sm-6">
<span class="hidden-xs hidden-sm">Extra small and small</span>
<span class="visible-xs-block visible-sm-block">&#10004; Visible on x-small and small</span>
@@ -202,11 +209,13 @@
<span class="hidden-sm hidden-md">Small and medium</span>
<span class="visible-sm-block visible-md-block">&#10004; Visible on small and medium</span>
</div>
</div>
</div>
<h3>Hidden on...</h3>
<p>Here, green checkmarks also indicate the element <strong>is hidden</strong> in your current viewport.</p>
<div class="row responsive-utilities-test hidden-on">
### Hidden on...
Here, green checkmarks also indicate the element **is hidden** in your current viewport.
<div class="row responsive-utilities-test hidden-on">
<div class="col-xs-6 col-sm-3">
<span class="hidden-xs">Extra small</span>
<span class="visible-xs-block">&#10004; Hidden on x-small</span>
@@ -224,8 +233,8 @@
<span class="hidden-lg">Large</span>
<span class="visible-lg-block">&#10004; Hidden on large</span>
</div>
</div>
<div class="row responsive-utilities-test hidden-on">
</div>
<div class="row responsive-utilities-test hidden-on">
<div class="col-xs-6 col-sm-6">
<span class="hidden-xs hidden-sm">Extra small and small</span>
<span class="visible-xs-block visible-sm-block">&#10004; Hidden on x-small and small</span>
@@ -252,5 +261,4 @@
<span class="hidden-sm hidden-md">Small and medium</span>
<span class="visible-sm-block visible-md-block">&#10004; Hidden on small and medium</span>
</div>
</div>
</div>