rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-28 20:52:21 +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> <h3>Media queries breakpoints</h3>
<p>Define the breakpoints at which your layout will change, adapting to different screen sizes.</p> <p>Define the breakpoints at which your layout will change, adapting to different screen sizes.</p>
<div class="row"> <div class="row">
<div class="col-lg-6"> <div class="col-xs-6">
<label>@screen-xsmall</label> <label>@screen-xs</label>
<input type="text" class="form-control" placeholder="480px"> <input type="text" class="form-control" placeholder="480px">
<label>@screen-small</label> <label>@screen-sm</label>
<input type="text" class="form-control" placeholder="768px"> <input type="text" class="form-control" placeholder="768px">
</div> </div>
<div class="col-lg-6"> <div class="col-xs-6">
<label>@screen-medium</label> <label>@screen-md</label>
<input type="text" class="form-control" placeholder="992px"> <input type="text" class="form-control" placeholder="992px">
<label>@screen-large</label> <label>@screen-lg</label>
<input type="text" class="form-control" placeholder="1200px"> <input type="text" class="form-control" placeholder="1200px">
</div> </div>
</div> </div>
@ -497,35 +497,41 @@ base_url: "../"
<h3>Container sizes</h3> <h3>Container sizes</h3>
<p>Define the maximum width of <code>.container</code> for different screen sizes.</p> <p>Define the maximum width of <code>.container</code> for different screen sizes.</p>
<div class="row"> <div class="row">
<div class="col-lg-6"> <div class="col-xs-6 col-sm-4">
<label>@container-tablet</label> <label>@container-tablet</label>
<input type="text" class="form-control" placeholder="728px"> <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> <label>@container-desktop</label>
<input type="text" class="form-control" placeholder="940px"> <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>
<div class="col-lg-6"> <div class="clearfix visible-xs"></div>
<label>@container-large-desktop</label> <div class="col-xs-6 col-sm-4">
<label>@container-lg-desktop</label>
<input type="text" class="form-control" placeholder="1170px"> <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>
</div> </div>
<h3>Grid system</h3> <h3>Grid system</h3>
<p>Define your custom responsive grid.</p> <p>Define your custom responsive grid.</p>
<div class="row"> <div class="row">
<div class="col-lg-6"> <div class="col-xs-6 col-sm-4">
<label>@grid-columns</label> <label>@grid-columns</label>
<input type="text" class="form-control" placeholder="12"> <input type="text" class="form-control" placeholder="12">
<p class="help-block">Number of columns in the grid.</p> <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> <label>@grid-gutter-width</label>
<input type="text" class="form-control" placeholder="30px"> <input type="text" class="form-control" placeholder="30px">
<p class="help-block">Padding between columns.</p> <p class="help-block">Padding between columns.</p>
</div> </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> <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> <p class="help-block">Point at which the navbar stops collapsing.</p>
</div> </div>
</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 // Note that `.col-lg-12` doesn't get floated on purpose—there's no need since
// it's full-width. // it's full-width.
@media (min-width: @screen-large-desktop) { @media (min-width: @screen-lg-desktop) {
.container { .container {
max-width: @container-large-desktop; max-width: @container-lg-desktop;
} }
.col-lg-1, .col-lg-1,

24
less/mixins.less
View File

@ -558,7 +558,7 @@
padding-right: (@gutter / 2); padding-right: (@gutter / 2);
// Calculate width based on number of columns available // Calculate width based on number of columns available
@media (min-width: @screen-small) { @media (min-width: @screen-sm) {
float: left; float: left;
width: percentage((@columns / @grid-columns)); width: percentage((@columns / @grid-columns));
} }
@ -566,17 +566,17 @@
// Generate the small column offsets // Generate the small column offsets
.make-sm-column-offset(@columns) { .make-sm-column-offset(@columns) {
@media (min-width: @screen-small) { @media (min-width: @screen-sm) {
margin-left: percentage((@columns / @grid-columns)); margin-left: percentage((@columns / @grid-columns));
} }
} }
.make-sm-column-push(@columns) { .make-sm-column-push(@columns) {
@media (min-width: @screen-small) { @media (min-width: @screen-sm) {
left: percentage((@columns / @grid-columns)); left: percentage((@columns / @grid-columns));
} }
} }
.make-sm-column-pull(@columns) { .make-sm-column-pull(@columns) {
@media (min-width: @screen-small) { @media (min-width: @screen-sm) {
right: percentage((@columns / @grid-columns)); right: percentage((@columns / @grid-columns));
} }
} }
@ -591,7 +591,7 @@
padding-right: (@gutter / 2); padding-right: (@gutter / 2);
// Calculate width based on number of columns available // Calculate width based on number of columns available
@media (min-width: @screen-medium) { @media (min-width: @screen-md) {
float: left; float: left;
width: percentage((@columns / @grid-columns)); width: percentage((@columns / @grid-columns));
} }
@ -599,17 +599,17 @@
// Generate the large column offsets // Generate the large column offsets
.make-md-column-offset(@columns) { .make-md-column-offset(@columns) {
@media (min-width: @screen-medium) { @media (min-width: @screen-md) {
margin-left: percentage((@columns / @grid-columns)); margin-left: percentage((@columns / @grid-columns));
} }
} }
.make-md-column-push(@columns) { .make-md-column-push(@columns) {
@media (min-width: @screen-medium) { @media (min-width: @screen-md) {
left: percentage((@columns / @grid-columns)); left: percentage((@columns / @grid-columns));
} }
} }
.make-md-column-pull(@columns) { .make-md-column-pull(@columns) {
@media (min-width: @screen-medium) { @media (min-width: @screen-md) {
right: percentage((@columns / @grid-columns)); right: percentage((@columns / @grid-columns));
} }
} }
@ -624,7 +624,7 @@
padding-right: (@gutter / 2); padding-right: (@gutter / 2);
// Calculate width based on number of columns available // Calculate width based on number of columns available
@media (min-width: @screen-large) { @media (min-width: @screen-lg) {
float: left; float: left;
width: percentage((@columns / @grid-columns)); width: percentage((@columns / @grid-columns));
} }
@ -632,17 +632,17 @@
// Generate the large column offsets // Generate the large column offsets
.make-lg-column-offset(@columns) { .make-lg-column-offset(@columns) {
@media (min-width: @screen-large) { @media (min-width: @screen-lg) {
margin-left: percentage((@columns / @grid-columns)); margin-left: percentage((@columns / @grid-columns));
} }
} }
.make-lg-column-push(@columns) { .make-lg-column-push(@columns) {
@media (min-width: @screen-large) { @media (min-width: @screen-lg) {
left: percentage((@columns / @grid-columns)); left: percentage((@columns / @grid-columns));
} }
} }
.make-lg-column-pull(@columns) { .make-lg-column-pull(@columns) {
@media (min-width: @screen-large) { @media (min-width: @screen-lg) {
right: percentage((@columns / @grid-columns)); 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 // Dropdowns get custom display when collapsed
.open .dropdown-menu { .open .dropdown-menu {
position: static; position: static;
@ -311,7 +311,7 @@
.form-inline(); .form-inline();
.form-group { .form-group {
@media (max-width: @screen-phone-max) { @media (max-width: @screen-xs-max) {
margin-bottom: 5px; margin-bottom: 5px;
} }
} }
@ -512,7 +512,7 @@
} }
} }
@media (max-width: @screen-phone-max) { @media (max-width: @screen-xs-max) {
// Dropdowns get custom display // Dropdowns get custom display
.open .dropdown-menu { .open .dropdown-menu {
> .dropdown-header { > .dropdown-header {

2
less/navs.less
View File

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

48
less/responsive-utilities.less
View File

@ -37,98 +37,98 @@
.visible-xs { .visible-xs {
.responsive-visibility(); .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(); .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(); .responsive-invisibility();
} }
@media (min-width: @screen-large-desktop) { @media (min-width: @screen-lg) {
.responsive-invisibility(); .responsive-invisibility();
} }
} }
.visible-sm { .visible-sm {
.responsive-invisibility(); .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(); .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(); .responsive-invisibility();
} }
@media (min-width: @screen-large-desktop) { @media (min-width: @screen-lg) {
.responsive-invisibility(); .responsive-invisibility();
} }
} }
.visible-md { .visible-md {
.responsive-invisibility(); .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(); .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(); .responsive-visibility();
} }
@media (min-width: @screen-large-desktop) { @media (min-width: @screen-lg) {
.responsive-invisibility(); .responsive-invisibility();
} }
} }
.visible-lg { .visible-lg {
.responsive-invisibility(); .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(); .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(); .responsive-invisibility();
} }
@media (min-width: @screen-large-desktop) { @media (min-width: @screen-lg) {
.responsive-visibility(); .responsive-visibility();
} }
} }
.hidden-xs { .hidden-xs {
.responsive-invisibility(); .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(); .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(); .responsive-visibility();
} }
@media (min-width: @screen-large-desktop) { @media (min-width: @screen-lg) {
.responsive-visibility(); .responsive-visibility();
} }
} }
.hidden-sm { .hidden-sm {
.responsive-visibility(); .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(); .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(); .responsive-visibility();
} }
@media (min-width: @screen-large-desktop) { @media (min-width: @screen-lg) {
.responsive-visibility(); .responsive-visibility();
} }
} }
.hidden-md { .hidden-md {
.responsive-visibility(); .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(); .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(); .responsive-invisibility();
} }
@media (min-width: @screen-large-desktop) { @media (min-width: @screen-lg) {
.responsive-visibility(); .responsive-visibility();
} }
} }
.hidden-lg { .hidden-lg {
.responsive-visibility(); .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(); .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(); .responsive-visibility();
} }
@media (min-width: @screen-large-desktop) { @media (min-width: @screen-lg) {
.responsive-invisibility(); .responsive-invisibility();
} }
} }

29
less/variables.less
View File

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