root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Merge branch 'respclasses' of https://github.com/digitaldisseny/bootstrap into digitaldisseny-respclasses

This commit is contained in:
Mark Otto 2012-07-12 16:24:37 -07:00
parent 3c775f2432 f0ed383e51
commit 7d324ee35b
3 changed files with 54 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
docs/assets/css/bootstrap-responsive.css vendored
View File

@ -57,34 +57,38 @@
display: none !important; display: none !important;
} }
@media (min-width: 768px) and (max-width: 979px) { .visible-desktop {
.visible-tablet {
display: inherit !important; display: inherit !important;
} }
.hidden-tablet {
display: none !important; @media (min-width: 768px) and (max-width: 979px) {
}
.hidden-desktop { .hidden-desktop {
display: inherit !important; display: inherit !important;
} }
.visible-desktop { .visible-desktop {
display: none !important ; display: none !important ;
} }
.visible-tablet {
display: inherit !important;
}
.hidden-tablet {
display: none !important;
}
} }
@media (max-width: 767px) { @media (max-width: 767px) {
.visible-phone {
display: inherit !important;
}
.hidden-phone {
display: none !important;
}
.hidden-desktop { .hidden-desktop {
display: inherit !important; display: inherit !important;
} }
.visible-desktop { .visible-desktop {
display: none !important; display: none !important;
} }
.visible-phone {
display: inherit !important;
}
.hidden-phone {
display: none !important;
}
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {

14
less/responsive-utilities.less
View File

@ -15,29 +15,29 @@
// For desktops // For desktops
.visible-phone { display: none !important; } .visible-phone { display: none !important; }
.visible-tablet { display: none !important; } .visible-tablet { display: none !important; }
.visible-desktop { } // Don't set initially
.hidden-phone { } .hidden-phone { }
.hidden-tablet { } .hidden-tablet { }
.hidden-desktop { display: none !important; } .hidden-desktop { display: none !important; }
.visible-desktop { display: inherit !important; }
// Tablets & small desktops only // Tablets & small desktops only
@media (min-width: 768px) and (max-width: 979px) { @media (min-width: 768px) and (max-width: 979px) {
// Hide everything else
.hidden-desktop { display: inherit !important; }
.visible-desktop { display: none !important ; }
// Show // Show
.visible-tablet { display: inherit !important; } .visible-tablet { display: inherit !important; }
// Hide // Hide
.hidden-tablet { display: none !important; } .hidden-tablet { display: none !important; }
// Hide everything else
.hidden-desktop { display: inherit !important; }
.visible-desktop { display: none !important ; }
} }
// Phones only // Phones only
@media (max-width: 767px) { @media (max-width: 767px) {
// Hide everything else
.hidden-desktop { display: inherit !important; }
.visible-desktop { display: none !important; }
// Show // Show
.visible-phone { display: inherit !important; } // Use inherit to restore previous behavior .visible-phone { display: inherit !important; } // Use inherit to restore previous behavior
// Hide // Hide
.hidden-phone { display: none !important; } .hidden-phone { display: none !important; }
// Hide everything else
.hidden-desktop { display: inherit !important; }
.visible-desktop { display: none !important; }
} }

31
less/tests/css-tests.html
View File

@ -1019,6 +1019,37 @@
<!-- Responsive utility classes
================================================== -->
<div class="page-header">
<h1>Responsive utility classes</h1>
</div>
<h4>Visible on...</h4>
<ul class="responsive-utilities-test visible-on">
<li>Phone<span class="visible-phone">✔ Phone</span></li>
<li>Tablet<span class="visible-tablet">✔ Tablet</span></li>
<li>Desktop<span class="visible-desktop">✔ Desktop</span></li>
</ul>
<ul class="responsive-utilities-test visible-on">
<li>Phone + Tablet<span class="visible-phone visible-tablet">✔ Phone + Tablet</span></li>
<li>Tablet + Desktop<span class="visible-tablet visible-desktop">✔ Tablet + Desktop</span></li>
<li>All<span class="visible-phone visible-tablet visible-desktop">✔ All</span></li>
</ul>
<h4>Hidden on...</h4>
<ul class="responsive-utilities-test hidden-on">
<li>Phone<span class="hidden-phone">✔ Phone</span></li>
<li>Tablet<span class="hidden-tablet">✔ Tablet</span></li>
<li>Desktop<span class="hidden-desktop">✔ Desktop</span></li>
</ul>
<ul class="responsive-utilities-test hidden-on">
<li>Phone + Tablet<span class="hidden-phone hidden-tablet">✔ Phone + Tablet</span></li>
<li>Tablet + Desktop<span class="hidden-tablet hidden-desktop">✔ Tablet + Desktop</span></li>
<li>All<span class="hidden-phone hidden-tablet hidden-desktop">✔ All</span></li>
</ul>