mirror of
https://github.com/twbs/bootstrap.git
synced 2024-11-30 12:24:19 +01:00
a7b8e52f8e
1. Rename file from responsive-utility-classes.less to responsive-utilities.less 2. Add additional help text around the documentation for the classes in Scaffolding 3. Remove unnecessary display values on initial classes 4. Drop block values for inherit for better support on inline and table elements 5. Make use of \!important on every class to avoid classes with more specific selectors (e.g., .span* classes for the grid)
42 lines
1.1 KiB
Plaintext
42 lines
1.1 KiB
Plaintext
// RESPONSIVE CLASSES
|
|
// ------------------
|
|
|
|
// Hide from screenreaders and browsers
|
|
// Credit: HTML5 Boilerplate
|
|
.hidden {
|
|
display: none;
|
|
visibility: hidden;
|
|
}
|
|
|
|
// Visibility utilities
|
|
|
|
// For desktops
|
|
.visible-phone { display: none !important; }
|
|
.visible-tablet { display: none !important; }
|
|
.visible-desktop { } // Don't set initially
|
|
.hidden-phone { }
|
|
.hidden-tablet { }
|
|
.hidden-desktop { display: none !important; }
|
|
|
|
// Phones only
|
|
@media (max-width: 767px) {
|
|
// Show
|
|
.visible-phone { display: inherit !important; } // Use inherit to restore previous behavior
|
|
// Hide
|
|
.hidden-phone { display: none !important; }
|
|
// Hide everything else
|
|
.hidden-desktop { display: inherit !important; }
|
|
.visible-desktop { display: none !important; }
|
|
}
|
|
|
|
// Tablets & small desktops only
|
|
@media (min-width: 768px) and (max-width: 979px) {
|
|
// Show
|
|
.visible-tablet { display: inherit !important; }
|
|
// Hide
|
|
.hidden-tablet { display: none !important; }
|
|
// Hide everything else
|
|
.hidden-desktop { display: inherit !important; }
|
|
.visible-desktop { display: none !important ; }
|
|
}
|