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

Adding media queries breakpoints variables

Browse Source
This commit is contained in:
Kevin 2013-04-27 18:47:47 +02:00
parent 8ae9c6ab34
commit 9ce7f22e99
10 changed files with 31 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/assets/css/bootstrap.css vendored
View File

@ -5341,7 +5341,7 @@ a.list-group-item.active > .badge,
display: inherit !important; display: inherit !important;
} }
@media (min-width: 768px) and (max-width: 979px) { @media (min-width: 768px) and (max-width: 992px) {
.visible-phone { .visible-phone {
display: none !important; display: none !important;
} }
@ -5362,7 +5362,7 @@ a.list-group-item.active > .badge,
} }
} }
@media (min-width: 980px) { @media (min-width: 992px) {
.visible-phone { .visible-phone {
display: none !important; display: none !important;
} }

4
less/carousel.less
View File

@ -170,8 +170,8 @@
} }
// Scale up controls for >768px // Scale up controls for tablets and up
@media screen and (min-width: 768px) { @media screen and (min-width: @screen-tablet) {
// Scale up the controls a smidge // Scale up the controls a smidge
.carousel-control .glyphicon { .carousel-control .glyphicon {

2
less/forms.less
View File

@ -514,7 +514,7 @@ select:focus:invalid {
// Horizontal forms // Horizontal forms
// -------------------------------------------------- // --------------------------------------------------
@media screen and (min-width: 768px) { @media screen and (min-width: @screen-tablet) {
.form-horizontal { .form-horizontal {

6
less/grid.less
View File

@ -26,7 +26,7 @@
.generate-small-grid-columns(@grid-columns); .generate-small-grid-columns(@grid-columns);
// Responsive: Tablets and up // Responsive: Tablets and up
@media screen and (min-width: 768px) { @media screen and (min-width: @screen-tablet) {
.container { .container {
max-width: 728px; max-width: 728px;
} }
@ -38,14 +38,14 @@
} }
// Responsive: Desktops and up // Responsive: Desktops and up
@media screen and (min-width: 992px) { @media screen and (min-width: @screen-desktop) {
.container { .container {
max-width: 940px; max-width: 940px;
} }
} }
// Responsive: Large desktops and up // Responsive: Large desktops and up
@media screen and (min-width: 1200px) { @media screen and (min-width: @screen-large-desktop) {
.container { .container {
max-width: 1170px; max-width: 1170px;
} }

2
less/jumbotron.less
View File

@ -20,7 +20,7 @@
} }
} }
@media screen and (min-width: 768px) { @media screen and (min-width: @screen-tablet) {
.jumbotron { .jumbotron {
padding: 50px 60px; padding: 50px 60px;
border-radius: @border-radius-large; // Only round corners at higher resolutions border-radius: @border-radius-large; // Only round corners at higher resolutions

2
less/modals.less
View File

@ -120,7 +120,7 @@
} }
// Scale up the modal // Scale up the modal
@media screen and (min-width: 768px) { @media screen and (min-width: @screen-tablet) {
.modal-dialog { .modal-dialog {
left: 50%; left: 50%;

2
less/navbar.less
View File

@ -269,7 +269,7 @@
// Inverse navbar // Inverse navbar
// -------------------------------------------------- // --------------------------------------------------
@media screen and (min-width: 768px) { @media screen and (min-width: @screen-tablet) {
.navbar { .navbar {
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;

4
less/responsive-utilities.less
View File

@ -46,7 +46,7 @@
// Tablets & small desktops only // Tablets & small desktops only
@media (min-width: 768px) and (max-width: 979px) { @media (min-width: @screen-tablet) and (max-width: @screen-desktop) {
.visible-phone { display: none !important; } .visible-phone { display: none !important; }
.visible-tablet { display: inherit !important; } .visible-tablet { display: inherit !important; }
.visible-desktop { display: none !important; } .visible-desktop { display: none !important; }
@ -57,7 +57,7 @@
} }
// For desktops // For desktops
@media (min-width: 980px) { @media (min-width: @screen-desktop) {
.visible-phone { display: none !important; } .visible-phone { display: none !important; }
.visible-tablet { display: none !important; } .visible-tablet { display: none !important; }
.visible-desktop { display: inherit !important; } .visible-desktop { display: inherit !important; }

2
less/scaffolding.less
View File

@ -22,7 +22,7 @@ html {
} }
// Disable iOS/WinMobile font size changes // Disable iOS/WinMobile font size changes
@media screen and (max-device-width: 480px) { @media screen and (max-device-width: @screen-phone) {
html { html {
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; -ms-text-size-adjust: 100%;

18
less/variables.less
View File

@ -369,6 +369,22 @@
@component-offset-horizontal: 180px; @component-offset-horizontal: 180px;
// Media queries breakpoints
// --------------------------------------------------
// Tiny screen / phone
@screen-tiny: 480px;
@screen-phone: @screen-tiny;
// Small screen / tablet
@screen-small: 768px;
@screen-tablet: @screen-small;
// Medium screen / desktop
@screen-medium: 992px;
@screen-desktop: @screen-medium;
// Large screen / wide desktop
@screen-large: 1200px;
@screen-large-desktop: @screen-large;
// Grid system // Grid system
// -------------------------------------------------- // --------------------------------------------------
@ -378,4 +394,4 @@
// Padding, to be divided by two and applied to the left and right of all columns // Padding, to be divided by two and applied to the left and right of all columns
@grid-gutter-width: 30px; @grid-gutter-width: 30px;
// Point at which the navbar stops collapsing // Point at which the navbar stops collapsing
@grid-float-breakpoint: 768px; @grid-float-breakpoint: @screen-tablet;