rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

Deprecate container-{device} vars for container-{size} classes; updates customizer and grid to do the same

Browse Source
This commit is contained in:
Mark Otto 2013-08-24 14:00:52 -07:00
parent c0b00f22fe
commit 5491d53b99
3 changed files with 16 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
customize.html
View File

@ -488,19 +488,19 @@ base_url: "../"
<p>Define the maximum width of <code>.container</code> for different screen sizes.</p>
<div class="row">
<div class="col-xs-6 col-sm-4">
<label>@container-tablet</label>
<input type="text" class="form-control" placeholder="728px" data-var="@container-tablet">
<label>@container-sm</label>
<input type="text" class="form-control" placeholder="728px" data-var="@container-sm">
<p class="help-block">For <code>@screen-sm-min</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" data-var="@container-desktop">
<label>@container-md</label>
<input type="text" class="form-control" placeholder="940px" data-var="@container-md">
<p class="help-block">For <code>@screen-md-min</code> and up.</p>
</div>
<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" data-var="@container-lg-desktop">
<label>@container-lg</label>
<input type="text" class="form-control" placeholder="1170px" data-var="@container-lg">
<p class="help-block">For <code>@screen-lg-min</code> and up.</p>
</div>
</div>

8
less/grid.less
View File

@ -116,7 +116,7 @@
@media (min-width: @screen-sm) {
.container {
max-width: @container-tablet;
max-width: @container-sm;
}
.col-sm-1,
@ -194,7 +194,7 @@
@media (min-width: @screen-md) {
.container {
max-width: @container-desktop;
max-width: @container-md;
}
.col-md-1,
.col-md-2,
@ -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-lg-desktop) {
@media (min-width: @screen-lg-min) {
.container {
max-width: @container-lg-desktop;
max-width: @container-lg;
}
.col-lg-1,

9
less/variables.less
View File

@ -626,10 +626,13 @@
// --------------------------------------------------
// Small screen / tablet
@container-tablet: ((720px + @grid-gutter-width));
@container-sm: ((720px + @grid-gutter-width));
@container-tablet: @container-sm;
// Medium screen / desktop
@container-desktop: ((940px + @grid-gutter-width));
@container-md: ((940px + @grid-gutter-width));
@container-desktop: @container-md;
// Large screen / wide desktop
@container-lg-desktop: ((1140px + @grid-gutter-width));
@container-lg: ((1140px + @grid-gutter-width));
@container-large-desktop: @container-lg;