POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/docs/_includes/css/responsive-utilities.html

   1 <div class="bs-docs-section">
   2   <h1 id="responsive-utilities" class="page-header">Responsive utilities</h1>
   3
   4   <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>
   5   <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>
   6
   7
   8   <h2 id="responsive-utilities-classes">Available classes</h2>
   9   <p>Use a single or combination of the available classes for toggling content across viewport breakpoints.</p>
  10   <div class="table-responsive">
  11     <table class="table table-bordered table-striped responsive-utilities">
  12       <thead>
  13         <tr>
  14           <th></th>
  15           <th>
  16             Extra small devices
  17             <small>Phones (&lt;768px)</small>
  18           </th>
  19           <th>
  20             Small devices
  21             <small>Tablets (&ge;768px)</small>
  22           </th>
  23           <th>
  24             Medium devices
  25             <small>Desktops (&ge;992px)</small>
  26           </th>
  27           <th>
  28             Large devices
  29             <small>Desktops (&ge;1200px)</small>
  30           </th>
  31         </tr>
  32       </thead>
  33       <tbody>
  34         <tr>
  35           <th scope="row"><code>.visible-xs-*</code></th>
  36           <td class="is-visible">Visible</td>
  37           <td class="is-hidden">Hidden</td>
  38           <td class="is-hidden">Hidden</td>
  39           <td class="is-hidden">Hidden</td>
  40         </tr>
  41         <tr>
  42           <th scope="row"><code>.visible-sm-*</code></th>
  43           <td class="is-hidden">Hidden</td>
  44           <td class="is-visible">Visible</td>
  45           <td class="is-hidden">Hidden</td>
  46           <td class="is-hidden">Hidden</td>
  47         </tr>
  48         <tr>
  49           <th scope="row"><code>.visible-md-*</code></th>
  50           <td class="is-hidden">Hidden</td>
  51           <td class="is-hidden">Hidden</td>
  52           <td class="is-visible">Visible</td>
  53           <td class="is-hidden">Hidden</td>
  54         </tr>
  55         <tr>
  56           <th scope="row"><code>.visible-lg-*</code></th>
  57           <td class="is-hidden">Hidden</td>
  58           <td class="is-hidden">Hidden</td>
  59           <td class="is-hidden">Hidden</td>
  60           <td class="is-visible">Visible</td>
  61         </tr>
  62       </tbody>
  63       <tbody>
  64         <tr>
  65           <th scope="row"><code>.hidden-xs</code></th>
  66           <td class="is-hidden">Hidden</td>
  67           <td class="is-visible">Visible</td>
  68           <td class="is-visible">Visible</td>
  69           <td class="is-visible">Visible</td>
  70         </tr>
  71         <tr>
  72           <th scope="row"><code>.hidden-sm</code></th>
  73           <td class="is-visible">Visible</td>
  74           <td class="is-hidden">Hidden</td>
  75           <td class="is-visible">Visible</td>
  76           <td class="is-visible">Visible</td>
  77         </tr>
  78         <tr>
  79           <th scope="row"><code>.hidden-md</code></th>
  80           <td class="is-visible">Visible</td>
  81           <td class="is-visible">Visible</td>
  82           <td class="is-hidden">Hidden</td>
  83           <td class="is-visible">Visible</td>
  84         </tr>
  85         <tr>
  86           <th scope="row"><code>.hidden-lg</code></th>
  87           <td class="is-visible">Visible</td>
  88           <td class="is-visible">Visible</td>
  89           <td class="is-visible">Visible</td>
  90           <td class="is-hidden">Hidden</td>
  91         </tr>
  92       </tbody>
  93     </table>
  94   </div>
  95
  96   <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>
  97   <div class="table-responsive">
  98     <table class="table table-bordered table-striped">
  99       <thead>
 100         <tr>
 101           <th>Group of classes</th>
 102           <th>CSS <code>display</code></th>
 103         </tr>
 104       </thead>
 105       <tbody>
 106         <tr>
 107           <th scope="row"><code>.visible-*-block</code></th>
 108           <td><code>display: block;</code></td>
 109         </tr>
 110         <tr>
 111           <th scope="row"><code>.visible-*-inline</code></th>
 112           <td><code>display: inline;</code></td>
 113         </tr>
 114         <tr>
 115           <th scope="row"><code>.visible-*-inline-block</code></th>
 116           <td><code>display: inline-block;</code></td>
 117         </tr>
 118       </tbody>
 119     </table>
 120   </div>
 121   <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>
 122   <p>The classes <code>.visible-xs</code>, <code>.visible-sm</code>, <code>.visible-md</code>, and <code>.visible-lg</code> also exist, but are <strong>deprecated as of v3.2.0</strong>. They are approximately equivalent to <code>.visible-*-block</code>, except with additional special cases for toggling <code>&lt;table&gt;</code>-related elements.</p>
 123
 124   <h2 id="responsive-utilities-print">Print classes</h2>
 125   <p>Similar to the regular responsive classes, use these for toggling content for print.</p>
 126   <div class="table-responsive">
 127     <table class="table table-bordered table-striped responsive-utilities">
 128       <thead>
 129         <tr>
 130           <th>Classes</th>
 131           <th>Browser</th>
 132           <th>Print</th>
 133         </tr>
 134       </thead>
 135       <tbody>
 136         <tr>
 137           <th scope="row">
 138             <code>.visible-print-block</code><br>
 139             <code>.visible-print-inline</code><br>
 140             <code>.visible-print-inline-block</code>
 141           </th>
 142           <td class="is-hidden">Hidden</td>
 143           <td class="is-visible">Visible</td>
 144         </tr>
 145         <tr>
 146           <th scope="row"><code>.hidden-print</code></th>
 147           <td class="is-visible">Visible</td>
 148           <td class="is-hidden">Hidden</td>
 149         </tr>
 150       </tbody>
 151     </table>
 152   </div>
 153   <p>The class <code>.visible-print</code> also exists but is <strong>deprecated</strong> as of v3.2.0. It is approximately equivalent to <code>.visible-print-block</code>, except with additional special cases for <code>&lt;table&gt;</code>-related elements.</p>
 154
 155
 156   <h2 id="responsive-utilities-tests">Test cases</h2>
 157   <p>Resize your browser or load on different devices to test the responsive utility classes.</p>
 158
 159   <h3>Visible on...</h3>
 160   <p>Green checkmarks indicate the element <strong>is visible</strong> in your current viewport.</p>
 161   <div class="row responsive-utilities-test visible-on">
 162     <div class="col-xs-6 col-sm-3">
 163       <span class="hidden-xs">Extra small</span>
 164       <span class="visible-xs-block">&#10004; Visible on x-small</span>
 165     </div>
 166     <div class="col-xs-6 col-sm-3">
 167       <span class="hidden-sm">Small</span>
 168       <span class="visible-sm-block">&#10004; Visible on small</span>
 169     </div>
 170     <div class="clearfix visible-xs-block"></div>
 171     <div class="col-xs-6 col-sm-3">
 172       <span class="hidden-md">Medium</span>
 173       <span class="visible-md-block">&#10004; Visible on medium</span>
 174     </div>
 175     <div class="col-xs-6 col-sm-3">
 176       <span class="hidden-lg">Large</span>
 177       <span class="visible-lg-block">&#10004; Visible on large</span>
 178     </div>
 179   </div>
 180   <div class="row responsive-utilities-test visible-on">
 181     <div class="col-xs-6">
 182       <span class="hidden-xs hidden-sm">Extra small and small</span>
 183       <span class="visible-xs-block visible-sm-block">&#10004; Visible on x-small and small</span>
 184     </div>
 185     <div class="col-xs-6">
 186       <span class="hidden-md hidden-lg">Medium and large</span>
 187       <span class="visible-md-block visible-lg-block">&#10004; Visible on medium and large</span>
 188     </div>
 189     <div class="clearfix visible-xs-block"></div>
 190     <div class="col-xs-6">
 191       <span class="hidden-xs hidden-md">Extra small and medium</span>
 192       <span class="visible-xs-block visible-md-block">&#10004; Visible on x-small and medium</span>
 193     </div>
 194     <div class="col-xs-6">
 195       <span class="hidden-sm hidden-lg">Small and large</span>
 196       <span class="visible-sm-block visible-lg-block">&#10004; Visible on small and large</span>
 197     </div>
 198     <div class="clearfix visible-xs-block"></div>
 199     <div class="col-xs-6">
 200       <span class="hidden-xs hidden-lg">Extra small and large</span>
 201       <span class="visible-xs-block visible-lg-block">&#10004; Visible on x-small and large</span>
 202     </div>
 203     <div class="col-xs-6">
 204       <span class="hidden-sm hidden-md">Small and medium</span>
 205       <span class="visible-sm-block visible-md-block">&#10004; Visible on small and medium</span>
 206     </div>
 207   </div>
 208
 209   <h3>Hidden on...</h3>
 210   <p>Here, green checkmarks also indicate the element <strong>is hidden</strong> in your current viewport.</p>
 211   <div class="row responsive-utilities-test hidden-on">
 212     <div class="col-xs-6 col-sm-3">
 213       <span class="hidden-xs">Extra small</span>
 214       <span class="visible-xs-block">&#10004; Hidden on x-small</span>
 215     </div>
 216     <div class="col-xs-6 col-sm-3">
 217       <span class="hidden-sm">Small</span>
 218       <span class="visible-sm-block">&#10004; Hidden on small</span>
 219     </div>
 220     <div class="clearfix visible-xs-block"></div>
 221     <div class="col-xs-6 col-sm-3">
 222       <span class="hidden-md">Medium</span>
 223       <span class="visible-md-block">&#10004; Hidden on medium</span>
 224     </div>
 225     <div class="col-xs-6 col-sm-3">
 226       <span class="hidden-lg">Large</span>
 227       <span class="visible-lg-block">&#10004; Hidden on large</span>
 228     </div>
 229   </div>
 230   <div class="row responsive-utilities-test hidden-on">
 231     <div class="col-xs-6">
 232       <span class="hidden-xs hidden-sm">Extra small and small</span>
 233       <span class="visible-xs-block visible-sm-block">&#10004; Hidden on x-small and small</span>
 234     </div>
 235     <div class="col-xs-6">
 236       <span class="hidden-md hidden-lg">Medium and large</span>
 237       <span class="visible-md-block visible-lg-block">&#10004; Hidden on medium and large</span>
 238     </div>
 239     <div class="clearfix visible-xs-block"></div>
 240     <div class="col-xs-6">
 241       <span class="hidden-xs hidden-md">Extra small and medium</span>
 242       <span class="visible-xs-block visible-md-block">&#10004; Hidden on x-small and medium</span>
 243     </div>
 244     <div class="col-xs-6">
 245       <span class="hidden-sm hidden-lg">Small and large</span>
 246       <span class="visible-sm-block visible-lg-block">&#10004; Hidden on small and large</span>
 247     </div>
 248     <div class="clearfix visible-xs-block"></div>
 249     <div class="col-xs-6">
 250       <span class="hidden-xs hidden-lg">Extra small and large</span>
 251       <span class="visible-xs-block visible-lg-block">&#10004; Hidden on x-small and large</span>
 252     </div>
 253     <div class="col-xs-6">
 254       <span class="hidden-sm hidden-md">Small and medium</span>
 255       <span class="visible-sm-block visible-md-block">&#10004; Hidden on small and medium</span>
 256     </div>
 257   </div>
 258 </div>