mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-17 19:06:40 +02:00
Code Issues Releases Wiki 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

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

@@ -510,28 +510,25 @@ body {
position: relative; position: relative;
float: left; float: left;
width: 25%; 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 { .responsive-utilities-test li + li {
margin-left: 10px; margin-left: 10px;
} }
.responsive-utilities-test span { .responsive-utilities-test span {
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
padding: 15px 10px; padding: 15px 10px;
font-size: 14px;
font-weight: bold;
line-height: 1.1;
text-align: center;
border-radius: 4px; 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; color: #468847;
background-color: #dff0d8; background-color: #dff0d8;
border: 1px solid #d6e9c6; 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> <p>Resize your browser or load on different devices to test the responsive utility classes.</p>
<h4>Visible on...</h4> <h4>Visible on...</h4>
<p>Green checkmarks indicate the element <strong>is visible</strong> in your current viewport.</p> <p>Green checkmarks indicate the element <strong>is visible</strong> in your current viewport.</p>
<ul class="responsive-utilities-test"> <ul class="responsive-utilities-test visible-on">
<li>Small<span class="visible-sm">&#10004; Visible on small</span></li> <li>
<li>Medium<span class="visible-md">&#10004; Visible on medium</span></li> <span class="hidden-sm">Small</span>
<li>Large<span class="visible-lg">&#10004; Visible on large</span></li> <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> </ul>
<h4>Hidden on...</h4> <h4>Hidden on...</h4>
<p>Here, green checkmarks indicate the element <strong>is hidden</strong> in your current viewport.</p> <p>Here, green checkmarks indicate the element <strong>is hidden</strong> in your current viewport.</p>
<ul class="responsive-utilities-test hidden-on"> <ul class="responsive-utilities-test hidden-on">
<li>Small<span class="hidden-sm">&#10004; Hidden on small</span></li> <li>
<li>Medium<span class="hidden-md">&#10004; Hidden on medium</span></li> <span class="visible-sm">Small</span>
<li>Large<span class="hidden-lg">&#10004; Hidden on desktop</span></li> <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> </ul>
</div> </div>