Changed Responsive utilities section in docs/css.html

This commit is contained in:
Vinay Raghu 2013-05-11 19:34:59 +05:30
parent 5e13f57870
commit 9880f7c803
1 changed files with 13 additions and 13 deletions

View File

@ -1949,7 +1949,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<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>
<h3>Responsive classes</h3>
<table class="table table-bordered table-striped responsive-utilities hidden-phone">
<table class="table table-bordered table-striped responsive-utilities hidden-sm">
<thead>
<tr>
<th>Class</th>
@ -1960,37 +1960,37 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</thead>
<tbody>
<tr>
<th><code>.visible-phone</code></th>
<th><code>.visible-sm</code></th>
<td class="is-visible">Visible</td>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
</tr>
<tr>
<th><code>.visible-tablet</code></th>
<th><code>.visible-md</code></th>
<td class="is-hidden">Hidden</td>
<td class="is-visible">Visible</td>
<td class="is-hidden">Hidden</td>
</tr>
<tr>
<th><code>.visible-desktop</code></th>
<th><code>.visible-lg</code></th>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
<td class="is-visible">Visible</td>
</tr>
<tr>
<th><code>.hidden-phone</code></th>
<th><code>.hidden-sm</code></th>
<td class="is-hidden">Hidden</td>
<td class="is-visible">Visible</td>
<td class="is-visible">Visible</td>
</tr>
<tr>
<th><code>.hidden-tablet</code></th>
<th><code>.hidden-md</code></th>
<td class="is-visible">Visible</td>
<td class="is-hidden">Hidden</td>
<td class="is-visible">Visible</td>
</tr>
<tr>
<th><code>.hidden-desktop</code></th>
<th><code>.hidden-lg</code></th>
<td class="is-visible">Visible</td>
<td class="is-visible">Visible</td>
<td class="is-hidden">Hidden</td>
@ -2029,16 +2029,16 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Visible on...</h4>
<p>Green checkmarks indicate that class is visible in your current viewport.</p>
<ul class="responsive-utilities-test">
<li>Phone<span class="visible-phone">&#10004; Phone</span></li>
<li>Tablet<span class="visible-tablet">&#10004; Tablet</span></li>
<li>Desktop<span class="visible-desktop">&#10004; Desktop</span></li>
<li>Phone<span class="visible-sm">&#10004; Phone</span></li>
<li>Tablet<span class="visible-md">&#10004; Tablet</span></li>
<li>Desktop<span class="visible-lg">&#10004; Desktop</span></li>
</ul>
<h4>Hidden on...</h4>
<p>Here, green checkmarks indicate that class is hidden in your current viewport.</p>
<ul class="responsive-utilities-test hidden-on">
<li>Phone<span class="hidden-phone">&#10004; Phone</span></li>
<li>Tablet<span class="hidden-tablet">&#10004; Tablet</span></li>
<li>Desktop<span class="hidden-desktop">&#10004; Desktop</span></li>
<li>Phone<span class="hidden-sm">&#10004; Phone</span></li>
<li>Tablet<span class="hidden-md">&#10004; Tablet</span></li>
<li>Desktop<span class="hidden-lg">&#10004; Desktop</span></li>
</ul>
</div>