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
+22 -14
View File
@@ -1,12 +1,16 @@
<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.
## Available classes
Use a single or combination of the available classes for toggling content across viewport breakpoints.
<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">
<table class="table table-bordered table-striped responsive-utilities">
<thead>
@@ -93,7 +97,8 @@
</table>
</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>
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>
@@ -150,12 +155,14 @@
</table>
</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.
### Visible on...
Green checkmarks indicate the element **is visible** in your current viewport.
<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">
<div class="col-xs-6 col-sm-3">
<span class="hidden-xs">Extra small</span>
@@ -204,8 +211,10 @@
</div>
</div>
<h3>Hidden on...</h3>
<p>Here, green checkmarks also indicate the element <strong>is hidden</strong> in your current viewport.</p>
### 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>
@@ -253,4 +262,3 @@
<span class="visible-sm-block visible-md-block">&#10004; Hidden on small and medium</span>
</div>
</div>
</div>