Dans notre exemple, nous allons chercher à ajouter un breakpoint col-xl-… pour des résolutions d’écran plus larges que col-lg.
Pour ce faire, il faudra éditer 4 fichiers :
bootstrap/mixins/grid-framework.scss
bootstrap/mixins/grid.scss
bootstrap/variables.scss
bootstrap/grid.scss
Une fois ces ajouts effectués, vous pourrez utiliser toute la batterie de mixins et de classes offerte par la grille Bootstrap pour les breakpoints XS, SM, MD, LG, mais également votre nouveau point de rupture XL !
mixins/grid-framework.scss
Rajouter en début de fichier la classe .col-xl-… dans le mixin make-grid-columns (arguments + boucle for
) :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
|
// [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}, .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}, .col-xl-#{$i}"; } #{$list} { position: relative; // Prevent columns from collapsing when empty min-height: 1px; // Inner gutter via padding padding-left: ceil(($grid-gutter-width / 2)); padding-right: floor(($grid-gutter-width / 2)); } } // [converter] This is defined recursively in LESS, but Sass supports real loops @mixin float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}") { @for $i from (1 + 1) through $grid-columns { $list: "#{$list}, .col-#{$class}-#{$i}"; } #{$list} { float: left; } } |
mixins/grid.scss
Rajouter en fin de fichier les mixins make-xl-column, make-xl-column-offset, make-xl-column-push, make-xl-column-pull (vous pouvez vous inspirer de la batterie de mixins déjà présente pour make-lg-…) :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
|
// Generate the extra large columns @mixin make-xl-column($columns, $gutter: $grid-gutter-width) { position: relative; min-height: 1px; padding-left: ($gutter / 2); padding-right: ($gutter / 2); @media (min-width: $screen-xl-min) { float: left; width: percentage(($columns / $grid-columns)); } } @mixin make-xl-column-offset($columns) { @media (min-width: $screen-xl-min) { margin-left: percentage(($columns / $grid-columns)); } } @mixin make-xl-column-push($columns) { @media (min-width: $screen-xl-min) { left: percentage(($columns / $grid-columns)); } } @mixin make-xl-column-pull($columns) { @media (min-width: $screen-xl-min) { right: percentage(($columns / $grid-columns)); } } |
variables.scss
Rajouter les Media queries breakpoints pour Extra Large screen / wide desktop :
|
//== Media queries breakpoints // //## Define the breakpoints at which your layout will change, adapting to different screen sizes. // Extra Large screen / wide desktop //** Deprecated `$screen-xl` as of v3.0.1 $screen-xl: 1600px !default; $screen-xl-min: $screen-xl !default; //** Deprecated `$screen-xl-desktop` as of v3.0.1 $screen-xl-desktop: $screen-xl-min !default; // So media queries don't overlap when required, provide a maximum $screen-lg-max: ($screen-xl-min - 1) !default; |
Rajouter les Container sizes :
|
//== Container sizes // //## Define the maximum width of `.container` for different screen sizes. // Extra Large screen / wide desktop $container-extralarge-desktop: (1600px) !default; //** For `$screen-lg-min` and up. $container-xl: $container-extralarge-desktop !default; |
grid.scss
Rajouter un Container widths pour le breakpoint xl :
|
// Container widths // // Set the container width, and override it for fixed navbars in media queries. .container { @media (min-width: $screen-xl-min) { width: $container-xl; } } |
En toute fin de fichier, rajouter un Extra Large grid :
|
// Extra Large grid // // Columns, offsets, pushes, and pulls for the large desktop device range. @media (min-width: $screen-xl-min) { @include make-grid(xl); } |