mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-20 20:00: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> 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>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>
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"> <div class="table-responsive">
<table class="table table-bordered table-striped responsive-utilities"> <table class="table table-bordered table-striped responsive-utilities">
<thead> <thead>
@@ -93,7 +97,8 @@
</table> </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> 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"> <div class="table-responsive">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
@@ -150,12 +155,14 @@
</table> </table>
</div> </div>
## Test cases
<h2 id="responsive-utilities-tests">Test cases</h2> 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.</p>
### 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="row responsive-utilities-test visible-on">
<div class="col-xs-6 col-sm-3"> <div class="col-xs-6 col-sm-3">
<span class="hidden-xs">Extra small</span> <span class="hidden-xs">Extra small</span>
@@ -204,8 +211,10 @@
</div> </div>
</div> </div>
<h3>Hidden on...</h3> ### Hidden on...
<p>Here, green checkmarks also indicate the element <strong>is hidden</strong> in your current viewport.</p>
Here, green checkmarks also indicate the element **is hidden** in your current viewport.
<div class="row responsive-utilities-test hidden-on"> <div class="row responsive-utilities-test hidden-on">
<div class="col-xs-6 col-sm-3"> <div class="col-xs-6 col-sm-3">
<span class="hidden-xs">Extra small</span> <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> <span class="visible-sm-block visible-md-block">&#10004; Hidden on small and medium</span>
</div> </div>
</div> </div>
</div>