rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00
Code Issues Actions Packages Releases 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
docs/assets/css/docs.css
View File

@ -510,28 +510,25 @@ body {
position: relative;
float: left;
width: 25%;
padding: 15px 10px;
font-size: 14px;
font-weight: bold;
line-height: 1.1;
color: #999;
text-align: center;
border: 1px solid #ddd;
border-radius: 4px;
}
.responsive-utilities-test li + li {
margin-left: 10px;
}
.responsive-utilities-test span {
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
padding: 15px 10px;
font-size: 14px;
font-weight: bold;
line-height: 1.1;
text-align: center;
border-radius: 4px;
}
.responsive-utilities-test span {
.responsive-utilities-test.visible-on [class*="hidden"],
.responsive-utilities-test.hidden-on [class*="visible"] {
color: #999;
border: 1px solid #ddd;
}
.responsive-utilities-test.visible-on [class*="visible"],
.responsive-utilities-test.hidden-on [class*="hidden"] {
color: #468847;
background-color: #dff0d8;
border: 1px solid #d6e9c6;

32
docs/css.html
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>