rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Fixes #10126: Update responsive test cases to properly highlight hidden class examples

Browse Source
This commit is contained in:
Mark Otto 2013-10-07 15:00:46 -05:00
parent 352532cd63
commit 969cb04acb
2 changed files with 29 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
css.html
View File

@ -2570,52 +2570,52 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div>
<h3>Hidden on...</h3>
<p>Here, green checkmarks indicate the element <strong>is hidden</strong> in your current viewport.</p>
<p>Here, green checkmarks also indicate the element <strong>is hidden</strong> in your current viewport.</p>
<div class="row responsive-utilities-test hidden-on">
<div class="col-xs-6 col-sm-3">
<span class="visible-xs">Extra small</span>
<span class="hidden-xs">&#10004; Hidden on x-small</span>
<span class="hidden-xs">Extra small</span>
<span class="visible-xs">&#10004; Hidden on x-small</span>
</div>
<div class="col-xs-6 col-sm-3">
<span class="visible-sm">Small</span>
<span class="hidden-sm">&#10004; Hidden on small</span>
<span class="hidden-sm">Small</span>
<span class="visible-sm">&#10004; Hidden on small</span>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">
<span class="visible-md">Medium</span>
<span class="hidden-md">&#10004; Hidden on medium</span>
<span class="hidden-md">Medium</span>
<span class="visible-md">&#10004; Hidden on medium</span>
</div>
<div class="col-xs-6 col-sm-3">
<span class="visible-lg">Large</span>
<span class="hidden-lg">&#10004; Hidden on large</span>
<span class="hidden-lg">Large</span>
<span class="visible-lg">&#10004; Hidden on large</span>
</div>
</div>
<div class="row responsive-utilities-test hidden-on">
<div class="col-xs-6 col-sm-6">
<span class="visible-xs visible-sm">Extra small and small</span>
<span class="hidden-xs hidden-sm">&#10004; Hidden on x-small and small</span>
<span class="hidden-xs hidden-sm">Extra small and small</span>
<span class="visible-xs visible-sm">&#10004; Hidden on x-small and small</span>
</div>
<div class="col-xs-6 col-sm-6">
<span class="visible-md visible-lg">Medium and large</span>
<span class="hidden-md hidden-lg">&#10004; Hidden on medium and large</span>
<span class="hidden-md hidden-lg">Medium and large</span>
<span class="visible-md visible-lg">&#10004; Hidden on medium and large</span>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-6">
<span class="visible-xs visible-md">Extra small and medium</span>
<span class="hidden-xs hidden-md">&#10004; Hidden on x-small and medium</span>
<span class="hidden-xs hidden-md">Extra small and medium</span>
<span class="visible-xs visible-md">&#10004; Hidden on x-small and medium</span>
</div>
<div class="col-xs-6 col-sm-6">
<span class="visible-sm visible-lg">Small and large</span>
<span class="hidden-sm hidden-lg">&#10004; Hidden on small and large</span>
<span class="hidden-sm hidden-lg">Small and large</span>
<span class="visible-sm visible-lg">&#10004; Hidden on small and large</span>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-6">
<span class="visible-xs visible-lg">Extra small and large</span>
<span class="hidden-xs hidden-lg">&#10004; Hidden on x-small and large</span>
<span class="hidden-xs hidden-lg">Extra small and large</span>
<span class="visible-xs visible-lg">&#10004; Hidden on x-small and large</span>
</div>
<div class="col-xs-6 col-sm-6">
<span class="visible-sm visible-md">Small and medium</span>
<span class="hidden-sm hidden-md">&#10004; Hidden on small and medium</span>
<span class="hidden-sm hidden-md">Small and medium</span>
<span class="visible-sm visible-md">&#10004; Hidden on small and medium</span>
</div>
</div>

16
docs-assets/css/docs.css
View File

@ -961,10 +961,10 @@ h1[id] {
.visible-on .col-xs-6 .hidden-sm,
.visible-on .col-xs-6 .hidden-md,
.visible-on .col-xs-6 .hidden-lg,
.hidden-on .col-xs-6 .visible-xs,
.hidden-on .col-xs-6 .visible-sm,
.hidden-on .col-xs-6 .visible-md,
.hidden-on .col-xs-6 .visible-lg {
.hidden-on .col-xs-6 .hidden-xs,
.hidden-on .col-xs-6 .hidden-sm,
.hidden-on .col-xs-6 .hidden-md,
.hidden-on .col-xs-6 .hidden-lg {
color: #999;
border: 1px solid #ddd;
}
@ -972,10 +972,10 @@ h1[id] {
.visible-on .col-xs-6 .visible-sm,
.visible-on .col-xs-6 .visible-md,
.visible-on .col-xs-6 .visible-lg,
.hidden-on .col-xs-6 .hidden-xs,
.hidden-on .col-xs-6 .hidden-sm,
.hidden-on .col-xs-6 .hidden-md,
.hidden-on .col-xs-6 .hidden-lg {
.hidden-on .col-xs-6 .visible-xs,
.hidden-on .col-xs-6 .visible-sm,
.hidden-on .col-xs-6 .visible-md,
.hidden-on .col-xs-6 .visible-lg {
color: #468847;
background-color: #dff0d8;
border: 1px solid #d6e9c6;