mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-22 05:03:16 +02:00
Code Issues Releases Wiki Activity

tweak grid docs, add new tier

Browse Source
This commit is contained in:
Mark Otto
2014-12-04 21:02:04 -08:00
parent 156750941b
commit a1a3a007b6
11 changed files with 680 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
scss/_grid.scss
View File

@@ -82,3 +82,12 @@
@include media-lg {
@include make-grid(lg);
}
// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.
@include media-lg {
@include make-grid(xl);
}

25
scss/_variables.scss
View File

@@ -272,16 +272,20 @@ $zindex-modal: 1040;
//
//## Define the minimum and maximum dimensions at which your layout will change, adapting to different screen sizes.
// Large screen / wide desktop
$screen-lg-min: 75em;
// Extra large screen / wide desktop
$screen-xl-min: 75em;
// Medium screen / desktop
$screen-md-min: 62em;
// Large screen / desktop
$screen-lg-min: 62em;
$screen-lg-max: ($screen-xl-min - .1);
// Medium screen / tablet
$screen-md-min: 48em;
$screen-md-max: ($screen-lg-min - .1);
// Small screen / tablet
$screen-sm-min: 48em;
// Small screen / phone
$screen-sm-max: ($screen-md-min - .1);
$screen-sm-min: 34em;
// Extra small screen / phone
$screen-xs-max: ($screen-sm-min - .1);
@@ -306,14 +310,17 @@ $grid-float-breakpoint-max: ($grid-float-breakpoint - 1);
//
//## Define the maximum width of `.container` for different screen sizes.
//** For `$screen-xs-min` and up.
$container-sm: 34em; // 480
//** For `$screen-sm-min` and up.
$container-sm: 45rem; // 720
$container-md: 45rem; // 720
//** For `$screen-md-min` and up.
$container-md: 60rem; // 960
$container-lg: 60rem; // 960
//** For `$screen-lg-min` and up.
$container-lg: 72.25rem; // 1140
$container-xl: 72.25rem; // 1140
//== Navbar

4
scss/mixins/_grid-framework.scss
View File

@@ -4,9 +4,9 @@
// any value of `$grid-columns`.
// [converter] This is defined recursively in LESS, but Sass supports real loops
@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") {
@mixin make-grid-columns($i: 1, $list: ".col-#{$i}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}, .col-xl-#{$i}") {
@for $i from (1 + 1) through $grid-columns {
$list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
$list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}, .col-xl-#{$i}";
}
#{$list} {
position: relative;