mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-15 11:59:39 +03:00
Code Activity

Simple responsive utilities test css

Browse Source
This commit is contained in:
Mark Otto
2013-05-16 20:07:41 -07:00
parent e5d6a40a77
commit af0b9cb41a
2 changed files with 36 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/css.html
+25 -7
View File
@@ -2003,17 +2003,35 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>Resize your browser or load on different devices to test the responsive utility classes.</p>
<h4>Visible on...</h4>
<p>Green checkmarks indicate the element <strong>is visible</strong> in your current viewport.</p>
<ul class="responsive-utilities-test">
<li>Small<span class="visible-sm">&#10004; Visible on small</span></li>
<li>Medium<span class="visible-md">&#10004; Visible on medium</span></li>
<li>Large<span class="visible-lg">&#10004; Visible on large</span></li>
<ul class="responsive-utilities-test visible-on">
<li>
<span class="hidden-sm">Small</span>
<span class="visible-sm">&#10004; Visible on small</span>
</li>
<li>
<span class="hidden-md">Medium</span>
<span class="visible-md">&#10004; Visible on medium</span>
</li>
<li>
<span class="hidden-lg">Large</span>
<span class="visible-lg">&#10004; Visible on large</span>
</li>
</ul>
<h4>Hidden on...</h4>
<p>Here, green checkmarks indicate the element <strong>is hidden</strong> in your current viewport.</p>
<ul class="responsive-utilities-test hidden-on">
<li>Small<span class="hidden-sm">&#10004; Hidden on small</span></li>
<li>Medium<span class="hidden-md">&#10004; Hidden on medium</span></li>
<li>Large<span class="hidden-lg">&#10004; Hidden on desktop</span></li>
<li>
<span class="visible-sm">Small</span>
<span class="hidden-sm">&#10004; Hidden on small</span>
</li>
<li>
<span class="visible-md">Medium</span>
<span class="hidden-md">&#10004; Hidden on medium</span>
</li>
<li>
<span class="visible-lg">Large</span>
<span class="hidden-lg">&#10004; Hidden on desktop</span>
</li>
</ul>
</div>