diff options
| author | Mark Otto <[email protected]> | 2014-07-10 20:02:47 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2014-07-10 20:02:47 -0700 |
| commit | e8bd019a19a82b2796b77101cb43892138f4935e (patch) | |
| tree | aa1c76aac39c9b74d18d46678e1159dbc4dd6479 /docs/_includes/css/responsive-utilities.html | |
| parent | 55d6b3fcda52fe89116319c086aa39573c28de80 (diff) | |
| download | bootstrap-e8bd019a19a82b2796b77101cb43892138f4935e.tar.xz bootstrap-e8bd019a19a82b2796b77101cb43892138f4935e.zip | |
move all css files over to components dir
Diffstat (limited to 'docs/_includes/css/responsive-utilities.html')
| -rw-r--r-- | docs/_includes/css/responsive-utilities.html | 256 |
1 files changed, 0 insertions, 256 deletions
diff --git a/docs/_includes/css/responsive-utilities.html b/docs/_includes/css/responsive-utilities.html deleted file mode 100644 index 2e4c8b383..000000000 --- a/docs/_includes/css/responsive-utilities.html +++ /dev/null @@ -1,256 +0,0 @@ -<div class="bs-docs-section"> - <h1 id="responsive-utilities" class="page-header">Responsive utilities</h1> - - <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> - - - <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> - <tr> - <th></th> - <th> - Extra small devices - <small>Phones (<768px)</small> - </th> - <th> - Small devices - <small>Tablets (≥768px)</small> - </th> - <th> - Medium devices - <small>Desktops (≥992px)</small> - </th> - <th> - Large devices - <small>Desktops (≥1200px)</small> - </th> - </tr> - </thead> - <tbody> - <tr> - <th><code>.visible-xs-*</code></th> - <td class="is-visible">Visible</td> - <td class="is-hidden">Hidden</td> - <td class="is-hidden">Hidden</td> - <td class="is-hidden">Hidden</td> - </tr> - <tr> - <th><code>.visible-sm-*</code></th> - <td class="is-hidden">Hidden</td> - <td class="is-visible">Visible</td> - <td class="is-hidden">Hidden</td> - <td class="is-hidden">Hidden</td> - </tr> - <tr> - <th><code>.visible-md-*</code></th> - <td class="is-hidden">Hidden</td> - <td class="is-hidden">Hidden</td> - <td class="is-visible">Visible</td> - <td class="is-hidden">Hidden</td> - </tr> - <tr> - <th><code>.visible-lg-*</code></th> - <td class="is-hidden">Hidden</td> - <td class="is-hidden">Hidden</td> - <td class="is-hidden">Hidden</td> - <td class="is-visible">Visible</td> - </tr> - </tbody> - <tbody> - <tr> - <th><code>.hidden-xs</code></th> - <td class="is-hidden">Hidden</td> - <td class="is-visible">Visible</td> - <td class="is-visible">Visible</td> - <td class="is-visible">Visible</td> - </tr> - <tr> - <th><code>.hidden-sm</code></th> - <td class="is-visible">Visible</td> - <td class="is-hidden">Hidden</td> - <td class="is-visible">Visible</td> - <td class="is-visible">Visible</td> - </tr> - <tr> - <th><code>.hidden-md</code></th> - <td class="is-visible">Visible</td> - <td class="is-visible">Visible</td> - <td class="is-hidden">Hidden</td> - <td class="is-visible">Visible</td> - </tr> - <tr> - <th><code>.hidden-lg</code></th> - <td class="is-visible">Visible</td> - <td class="is-visible">Visible</td> - <td class="is-visible">Visible</td> - <td class="is-hidden">Hidden</td> - </tr> - </tbody> - </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> - <div class="table-responsive"> - <table class="table table-bordered table-striped"> - <thead> - <tr> - <th>Group of classes</th> - <th>CSS <code>display</code></th> - </tr> - </thead> - <tbody> - <tr> - <td><code>.visible-*-block</code></td> - <td><code>display: block;</code></td> - </tr> - <tr> - <td><code>.visible-*-inline</code></td> - <td><code>display: inline;</code></td> - </tr> - <tr> - <td><code>.visible-*-inline-block</code></td> - <td><code>display: inline-block;</code></td> - </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> - - <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> - <th>Classes</th> - <th>Browser</th> - <th>Print</th> - </tr> - </thead> - <tbody> - <tr> - <th> - <code>.visible-print-block</code><br> - <code>.visible-print-inline</code><br> - <code>.visible-print-inline-block</code> - </th> - <td class="is-hidden">Hidden</td> - <td class="is-visible">Visible</td> - </tr> - <tr> - <th><code>.hidden-print</code></th> - <td class="is-visible">Visible</td> - <td class="is-hidden">Hidden</td> - </tr> - </tbody> - </table> - </div> - - - <h2 id="responsive-utilities-tests">Test cases</h2> - <p>Resize your browser or load on different devices to test the responsive utility classes.</p> - - <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> - <span class="visible-xs-block">✔ Visible on x-small</span> - </div> - <div class="col-xs-6 col-sm-3"> - <span class="hidden-sm">Small</span> - <span class="visible-sm-block">✔ Visible on small</span> - </div> - <div class="clearfix visible-xs-block"></div> - <div class="col-xs-6 col-sm-3"> - <span class="hidden-md">Medium</span> - <span class="visible-md-block">✔ Visible on medium</span> - </div> - <div class="col-xs-6 col-sm-3"> - <span class="hidden-lg">Large</span> - <span class="visible-lg-block">✔ Visible on large</span> - </div> - </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">✔ Visible on x-small and small</span> - </div> - <div class="col-xs-6 col-sm-6"> - <span class="hidden-md hidden-lg">Medium and large</span> - <span class="visible-md-block visible-lg-block">✔ Visible on medium and large</span> - </div> - <div class="clearfix visible-xs-block"></div> - <div class="col-xs-6 col-sm-6"> - <span class="hidden-xs hidden-md">Extra small and medium</span> - <span class="visible-xs-block visible-md-block">✔ Visible on x-small and medium</span> - </div> - <div class="col-xs-6 col-sm-6"> - <span class="hidden-sm hidden-lg">Small and large</span> - <span class="visible-sm-block visible-lg-block">✔ Visible on small and large</span> - </div> - <div class="clearfix visible-xs-block"></div> - <div class="col-xs-6 col-sm-6"> - <span class="hidden-xs hidden-lg">Extra small and large</span> - <span class="visible-xs-block visible-lg-block">✔ Visible on x-small and large</span> - </div> - <div class="col-xs-6 col-sm-6"> - <span class="hidden-sm hidden-md">Small and medium</span> - <span class="visible-sm-block visible-md-block">✔ Visible on small and medium</span> - </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"> - <div class="col-xs-6 col-sm-3"> - <span class="hidden-xs">Extra small</span> - <span class="visible-xs-block">✔ Hidden on x-small</span> - </div> - <div class="col-xs-6 col-sm-3"> - <span class="hidden-sm">Small</span> - <span class="visible-sm-block">✔ Hidden on small</span> - </div> - <div class="clearfix visible-xs-block"></div> - <div class="col-xs-6 col-sm-3"> - <span class="hidden-md">Medium</span> - <span class="visible-md-block">✔ Hidden on medium</span> - </div> - <div class="col-xs-6 col-sm-3"> - <span class="hidden-lg">Large</span> - <span class="visible-lg-block">✔ Hidden on large</span> - </div> - </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">✔ Hidden on x-small and small</span> - </div> - <div class="col-xs-6 col-sm-6"> - <span class="hidden-md hidden-lg">Medium and large</span> - <span class="visible-md-block visible-lg-block">✔ Hidden on medium and large</span> - </div> - <div class="clearfix visible-xs-block"></div> - <div class="col-xs-6 col-sm-6"> - <span class="hidden-xs hidden-md">Extra small and medium</span> - <span class="visible-xs-block visible-md-block">✔ Hidden on x-small and medium</span> - </div> - <div class="col-xs-6 col-sm-6"> - <span class="hidden-sm hidden-lg">Small and large</span> - <span class="visible-sm-block visible-lg-block">✔ Hidden on small and large</span> - </div> - <div class="clearfix visible-xs-block"></div> - <div class="col-xs-6 col-sm-6"> - <span class="hidden-xs hidden-lg">Extra small and large</span> - <span class="visible-xs-block visible-lg-block">✔ Hidden on x-small and large</span> - </div> - <div class="col-xs-6 col-sm-6"> - <span class="hidden-sm hidden-md">Small and medium</span> - <span class="visible-sm-block visible-md-block">✔ Hidden on small and medium</span> - </div> - </div> -</div> |
