Bootstrap的栅格源码
1.固定和流体容器的公共样式
// 固定和流体容器的公共样式 //@grid-gutter-widt：槽宽 .container-fixed(@gutter: @grid-gutter-width) { // margin-right: auto; margin-left: auto; padding-left: floor((@gutter / 2)); padding-right: ceil((@gutter / 2)); &:extend(.clearfix all); //继承 } // 行 .make-row(@gutter: @grid-gutter-width) { margin-left: ceil((@gutter / -2)); margin-right: floor((@gutter / -2)); &:extend(.clearfix all); }
2.调用混合入口
//固定容器 .container { .container-fixed(); //定义左右padding，margin,清除浮动 @media (min-width: @screen-sm-min) { width: @container-sm; } @media (min-width: @screen-md-min) { width: @container-md; } @media (min-width: @screen-lg-min) { width: @container-lg; } } //流体容器 .container-fluid { .container-fixed(); } // 行 .row { .make-row(); } // 列 .make-grid-columns(); // 移动优先,顺序不变 .make-grid(xs); @media (min-width: @screen-sm-min) { .make-grid(sm); } @media (min-width: @screen-md-min) { .make-grid(md); } @media (min-width: @screen-lg-min) { .make-grid(lg); }
3，定义列的混合
// 列第一步 .make-grid-columns() { //.col(2,".col-xs-1, .col-sm-1, .col-md-1, .col-lg-1") .col(@index) { @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; .col((@index + 1), @item); } /* 递归 .col(3,".col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2") .... .col(13,str) str: .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, ... .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 */ .col(@index, @list) when (@index =< @grid-columns) { @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; .col((@index + 1), ~"@{list}, @{item}"); } /* .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, ... .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12{ position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } */ .col(@index, @list) when (@index > @grid-columns) { @{list} { position: relative; min-height: 1px; padding-left: ceil((@grid-gutter-width / 2)); padding-right: floor((@grid-gutter-width / 2)); } } .col(1); } // 列第二步 .make-grid(@class) { //2.1 .float-grid-columns(@class); //2.2 .loop-grid-columns(@grid-columns, @class, width); //2.3(列排序) .loop-grid-columns(@grid-columns, @class, pull); .loop-grid-columns(@grid-columns, @class, push); //2.4(列偏移) .loop-grid-columns(@grid-columns, @class, offset); } //2.1 /* * .col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,...col-xs-12{ * float: left; * } * */ .float-grid-columns(@class) { .col(@index) { @item: ~".col-@{class}-@{index}"; .col((@index + 1), @item); } .col(@index, @list) when (@index =< @grid-columns) { // general @item: ~".col-@{class}-@{index}"; .col((@index + 1), ~"@{list}, @{item}"); } .col(@index, @list) when (@index > @grid-columns) { // terminal @{list} { float: left; } } .col(1); } //2.2（width） 2.3（pull push） 2.4（offset）的入口 .loop-grid-columns(@index, @class, @type) when (@index >= 0) { .calc-grid-column(@index, @class, @type); .loop-grid-columns((@index - 1), @class, @type); } // 2.2 /* * .col-xs-12{ * width:12/12; * } * .col-xs-11{ * width:11/12; * } * ... * .col-xs-1{ * width:1/12; * } * */ .calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) { .col-@{class}-@{index} { width: percentage((@index / @grid-columns)); } } //2.3 /*push pull: * .col-xs-push-12{ .col-xs-pull-12{ * left:12/12; right:12/12; * } } * .col-xs-push-11{ * left:11/12; * } * ... ... * .col-xs-push-1{ * left:1/12; * } * .col-xs-push-0{ .col-xs-pull-0{ * left:auto; right:auto; * } } * */ .calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) { .col-@{class}-push-@{index} { left: percentage((@index / @grid-columns)); } } .calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) { .col-@{class}-push-0 { left: auto; } } .calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) { .col-@{class}-pull-@{index} { right: percentage((@index / @grid-columns)); } } .calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) { .col-@{class}-pull-0 { right: auto; } } //2.4 /* * .col-xs-offset-12{ * margin-left:12/12; * } * .col-xs-offset-11{ * margin-left:11/12; * } * ... * .col-xs-offset-1{ * margin-left:1/12; * } * .col-xs-offset-0{ * margin-left:0; * } * */ .calc-grid-column(@index, @class, @type) when (@type = offset) { .col-@{class}-offset-@{index} { margin-left: percentage((@index / @grid-columns)); } }
4.笔记
###容器 1.流体容器 width为auto 2.固定容器 阈值min-width width 大于等于1200(lg 大屏pc) 1170（1140+槽宽） 大于等于992(md 中屏pc) 970（940+槽宽） 小于1200 大于等于768(sm 平板) 750（720+槽宽） 小于992 小于768(xs 移动手机) auto 3.栅格系统 ###栅格源码分析 1.流体容器&固定容器 公共样式 margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; 2.固定容器 特定样式 顺序不可变 @media (min-width: @screen-sm-min) { width: @container-sm; } @media (min-width: @screen-md-min) { width: @container-md; } @media (min-width: @screen-lg-min) { width: @container-lg; } 3.行 margin-left: -15px; margin-right: -15px; 4.列 .make-grid-columns()---> .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, ... .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12{ position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } .make-grid(xs)---> float-grid-columns(@class); * .col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,...col-xs-12{ * float: left; * } .loop-grid-columns(@grid-columns, @class, width); * .col-xs-12{ * width:12/12; * } * .col-xs-11{ * width:11/12; * } * ... * .col-xs-1{ * width:1/12; * } .loop-grid-columns(@grid-columns, @class, pull); .loop-grid-columns(@grid-columns, @class, push); *push pull: * .col-xs-push-12{ .col-xs-pull-12{ * left:12/12; right:12/12; * } } * .col-xs-push-11{ * left:11/12; * } * ... ... * .col-xs-push-1{ * left:1/12; * } * .col-xs-push-0{ .col-xs-pull-0{ * left:auto; right:auto; * } } .loop-grid-columns(@grid-columns, @class, offset); ###响应式工具 ###栅格盒模型设计的精妙之处 容器两边具有15px的padding 、 行 两边具有-15px的margin 列 两边具有15px的padding 为了维护槽宽的规则， 列两边必须得要15px的padding 为了能使列嵌套行 行两边必须要有-15px的margin 为了让容器可以包裹住行 容器两边必须要有15px的padding