rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

More consistent naming with screen size variables using xs, sm, md, and lg

Browse Source
This commit is contained in:
Mark Otto 2013-08-17 15:21:38 -07:00
parent 5ba19dc884
commit 61caed21e2
7 changed files with 77 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
customize.html
View File

@ -480,16 +480,16 @@ base_url: "../"
<h3>Media queries breakpoints</h3>
<p>Define the breakpoints at which your layout will change, adapting to different screen sizes.</p>
<div class="row">
<div class="col-lg-6">
<label>@screen-xsmall</label>
<div class="col-xs-6">
<label>@screen-xs</label>
<input type="text" class="form-control" placeholder="480px">
<label>@screen-small</label>
<label>@screen-sm</label>
<input type="text" class="form-control" placeholder="768px">
</div>
<div class="col-lg-6">
<label>@screen-medium</label>
<div class="col-xs-6">
<label>@screen-md</label>
<input type="text" class="form-control" placeholder="992px">
<label>@screen-large</label>
<label>@screen-lg</label>
<input type="text" class="form-control" placeholder="1200px">
</div>
</div>
@ -497,35 +497,41 @@ base_url: "../"
<h3>Container sizes</h3>
<p>Define the maximum width of <code>.container</code> for different screen sizes.</p>
<div class="row">
<div class="col-lg-6">
<div class="col-xs-6 col-sm-4">
<label>@container-tablet</label>
<input type="text" class="form-control" placeholder="728px">
<p class="help-block">For <code>@screen-small</code> and up.</p>
<p class="help-block">For <code>@screen-sm</code> and up.</p>
</div>
<div class="col-xs-6 col-sm-4">
<label>@container-desktop</label>
<input type="text" class="form-control" placeholder="940px">
<p class="help-block">For <code>@screen-medium</code> and up.</p>
<p class="help-block">For <code>@screen-md</code> and up.</p>
</div>
<div class="col-lg-6">
<label>@container-large-desktop</label>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-4">
<label>@container-lg-desktop</label>
<input type="text" class="form-control" placeholder="1170px">
<p class="help-block">For <code>@screen-large</code> and up.</p>
<p class="help-block">For <code>@screen-lg</code> and up.</p>
</div>
</div>
<h3>Grid system</h3>
<p>Define your custom responsive grid.</p>
<div class="row">
<div class="col-lg-6">
<div class="col-xs-6 col-sm-4">
<label>@grid-columns</label>
<input type="text" class="form-control" placeholder="12">
<p class="help-block">Number of columns in the grid.</p>
</div>
<div class="col-xs-6 col-sm-4">
<label>@grid-gutter-width</label>
<input type="text" class="form-control" placeholder="30px">
<p class="help-block">Padding between columns.</p>
</div>
<div class="col-lg-6">
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-4">
<label>@grid-float-breakpoint</label>
<input type="text" class="form-control" placeholder="@screen-tablet">
<input type="text" class="form-control" placeholder="@screen-sm">
<p class="help-block">Point at which the navbar stops collapsing.</p>
</div>
</div>

4
less/grid.less
View File

@ -272,9 +272,9 @@
// Note that `.col-lg-12` doesn't get floated on purpose—there's no need since
// it's full-width.
@media (min-width: @screen-large-desktop) {
@media (min-width: @screen-lg-desktop) {
.container {
max-width: @container-large-desktop;
max-width: @container-lg-desktop;
}
.col-lg-1,

24
less/mixins.less
View File

@ -558,7 +558,7 @@
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-small) {
@media (min-width: @screen-sm) {
float: left;
width: percentage((@columns / @grid-columns));
}
@ -566,17 +566,17 @@
// Generate the small column offsets
.make-sm-column-offset(@columns) {
@media (min-width: @screen-small) {
@media (min-width: @screen-sm) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-small) {
@media (min-width: @screen-sm) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-small) {
@media (min-width: @screen-sm) {
right: percentage((@columns / @grid-columns));
}
}
@ -591,7 +591,7 @@
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-medium) {
@media (min-width: @screen-md) {
float: left;
width: percentage((@columns / @grid-columns));
}
@ -599,17 +599,17 @@
// Generate the large column offsets
.make-md-column-offset(@columns) {
@media (min-width: @screen-medium) {
@media (min-width: @screen-md) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-md-column-push(@columns) {
@media (min-width: @screen-medium) {
@media (min-width: @screen-md) {
left: percentage((@columns / @grid-columns));
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-medium) {
@media (min-width: @screen-md) {
right: percentage((@columns / @grid-columns));
}
}
@ -624,7 +624,7 @@
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-large) {
@media (min-width: @screen-lg) {
float: left;
width: percentage((@columns / @grid-columns));
}
@ -632,17 +632,17 @@
// Generate the large column offsets
.make-lg-column-offset(@columns) {
@media (min-width: @screen-large) {
@media (min-width: @screen-lg) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-large) {
@media (min-width: @screen-lg) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-large) {
@media (min-width: @screen-lg) {
right: percentage((@columns / @grid-columns));
}
}

6
less/navbar.less
View File

@ -216,7 +216,7 @@
}
}
@media (max-width: @screen-phone-max) {
@media (max-width: @screen-xs-max) {
// Dropdowns get custom display when collapsed
.open .dropdown-menu {
position: static;
@ -311,7 +311,7 @@
.form-inline();
.form-group {
@media (max-width: @screen-phone-max) {
@media (max-width: @screen-xs-max) {
margin-bottom: 5px;
}
}
@ -512,7 +512,7 @@
}
}
@media (max-width: @screen-phone-max) {
@media (max-width: @screen-xs-max) {
// Dropdowns get custom display
.open .dropdown-menu {
> .dropdown-header {

2
less/navs.less
View File

@ -162,7 +162,7 @@
}
}
@media (min-width: @screen-small) {
@media (min-width: @screen-sm) {
> li {
display: table-cell;
width: 1%;

48
less/responsive-utilities.less
View File

@ -37,98 +37,98 @@
.visible-xs {
.responsive-visibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-invisibility();
}
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-invisibility();
}
@media (min-width: @screen-large-desktop) {
@media (min-width: @screen-lg) {
.responsive-invisibility();
}
}
.visible-sm {
.responsive-invisibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-visibility();
}
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-invisibility();
}
@media (min-width: @screen-large-desktop) {
@media (min-width: @screen-lg) {
.responsive-invisibility();
}
}
.visible-md {
.responsive-invisibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-invisibility();
}
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-visibility();
}
@media (min-width: @screen-large-desktop) {
@media (min-width: @screen-lg) {
.responsive-invisibility();
}
}
.visible-lg {
.responsive-invisibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-invisibility();
}
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-invisibility();
}
@media (min-width: @screen-large-desktop) {
@media (min-width: @screen-lg) {
.responsive-visibility();
}
}
.hidden-xs {
.responsive-invisibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-visibility();
}
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-visibility();
}
@media (min-width: @screen-large-desktop) {
@media (min-width: @screen-lg) {
.responsive-visibility();
}
}
.hidden-sm {
.responsive-visibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-invisibility();
}
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-visibility();
}
@media (min-width: @screen-large-desktop) {
@media (min-width: @screen-lg) {
.responsive-visibility();
}
}
.hidden-md {
.responsive-visibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-visibility();
}
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-invisibility();
}
@media (min-width: @screen-large-desktop) {
@media (min-width: @screen-lg) {
.responsive-visibility();
}
}
.hidden-lg {
.responsive-visibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-visibility();
}
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-visibility();
}
@media (min-width: @screen-large-desktop) {
@media (min-width: @screen-lg) {
.responsive-invisibility();
}
}

25
less/variables.less
View File

@ -193,26 +193,25 @@
// --------------------------------------------------
// Extra small screen / phone
@screen-xsmall: 480px;
@screen-phone: @screen-xsmall;
@screen-xs: 480px;
@screen-phone: @screen-xs;
// Small screen / tablet
@screen-small: 768px;
@screen-tablet: @screen-small;
@screen-sm: 768px;
@screen-tablet: @screen-sm;
// Medium screen / desktop
@screen-medium: 992px;
@screen-desktop: @screen-medium;
@screen-md: 992px;
@screen-desktop: @screen-md;
// Large screen / wide desktop
@screen-large: 1200px;
@screen-large-desktop: @screen-large;
@screen-lg: 1200px;
@screen-lg-desktop: @screen-lg;
// So media queries don't overlap when required, provide a maximum
@screen-phone-max: (@screen-small - 1);
@screen-small-max: (@screen-medium - 1);
@screen-tablet-max: (@screen-desktop - 1);
@screen-desktop-max: (@screen-large-desktop - 1);
@screen-xs-max: (@screen-sm - 1);
@screen-sm-max: (@screen-md - 1);
@screen-md-max: (@screen-lg - 1);
// Grid system
@ -606,4 +605,4 @@
@container-desktop: ((940px + @grid-gutter-width));
// Large screen / wide desktop
@container-large-desktop: ((1140px + @grid-gutter-width));
@container-lg-desktop: ((1140px + @grid-gutter-width));