bootstrap源码简单分析
bootstrap源码简单分析
栅格源码分析:
ps:源码文件是less的,由于插入代码块没有没有less选择,选了html,有报错见谅
1.流体容器和固定容器 公共样式
//@grid-gutter-wide: 槽宽(默认30px).container-fixed(@gutter: @grid-gutter-width){
margin-right: auto;
margin-left: auto;
padding-left: floor((@gutter/2)); //padding-left: 15px;
padding-right: ceil((@gutter/2)); //padding-right: 15px;
&:extend(.clearfix all);
}
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.行:
.make-row(@gutter: @grid-gutter-width){
margin-left: ceil((@gutter/-2)); //margin-left: -15px;
margin-right: floor((@gutter/-2)); //margin-right: -15px;
&:extend(.clearfix all); //继承了.clearfix
}4.列 (整个 grid-framework.less文件都是用来定义列的)
.make-grid-colums(); //第一个混合实现在下
.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);
}
grid-framework.less 文件:
//列第一步 .make-grid-columns(){ //使用递归实现循环 .col(@index){ @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; .col((@index + 1), @item); //.col(2,".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}") //因为@index为块级作用域 所以: .col(2, ".col-xs-1, .col-sm-1, .col-md-1, .col-lg-1") } //@grid-columns 的值为12 .col(@index, @list) when (@index=< @grid-columns){ //递归 .col()自己调用自己 @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; .col((@index + 1), ~"@{list}, @{item}");
//.col(3, ".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}, .col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}") //@index为块级作用域 所以: .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, */ } //下面的@list就是上面的str //然后把@list作为选择器 .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-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: ceil((@grid-gutter-width /2)); //15px 槽宽的一半 padding-right: floor((@grid-gutter-width /2)); //15px 槽宽的一半 */ .col(1); } //还是列 (接上) //列第一步 .make-grid-colums();<!-- 上面的混合结果 .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: ceil((@grid-gutter-width /2)); //15px 槽宽的一半 padding-right: floor((@grid-gutter-width /2)); //15px 槽宽的一半-->//移动优先 //列第二步 .make-grid(xs);----> //2.1 .make-grip(@class){ float-grid-columns(@class); /*结果: .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4,...col-xs-12{ float: left; */ 2.2 .loop-grip-columns(@grid-columns,@class, width); /* 2.2 结果 .col-xs-12{ width:12/12; } .col-xs-11{ width:11/12; } ... .col-xs-1{ width:1/12; } */ //2.3(列排序) .loop-grip-columns(@grid-columns,@class, pull); .loop-grip-columns(@grid-columns,@class, push);
//2.3结果 /* left(push) right(pull) .col-xs-push-12{ .col-xs-pull-12{ left:12/12; right:12/12 } } .col-xs-push-11{ .col-xs-pull-11{ left:11/12; right:11/12; } } ... ... .col-xs-push-1{ .col-xs-pull-1{ left:1/12; right:1/12; } } .col-xs-push-0{ .col-xs-pull-0{ left:auto; right:auto; } } */ //2.4(列偏移) 为margin-left .loop-grip-columns(@grid-columns,@class, offset); /*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; } */ }
//相关分析 //2.1 /* .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4,...col-xs-12{ float: left; } */ //@class就是传进来的xs .float-grid-columns(@class){ .col(@index){ @item: ~".col-@{class}-@{index}"; .col((@index + 1), @item); } .col(@index,@list) when (@index=< @grid-columns{ @item: ~".col-@{class}-@{index}"; .col((@index+1), ~"@{list}, @{item}"); } .col(@index,@list) when (@index > @grid-columns){ @{list}{ float: left; } } //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; } */ //@index = 12, @class = xs, @type= width .loop-grid-columns(@index,@class,@type) when (@index>=0){ .calc-grid-column(@index,@class,@type); .loop-grid-columns((@index - 1), @class, @type); } .calc-grid-columns(@index,@class,@type) when (@type = width) and (@index>0){ .col-@{class}-@{index}{ width: percentage((@index /@grid-columns)); } } //2.3 /* left(push) right(pull) .col-xs-push-12{ .col-xs-pull-12{ left:12/12; right:12/12 } } .col-xs-push-11{ .col-xs-pull-11{ left:11/12; right:11/12; } } ... ... .col-xs-push-1{ .col-xs-pull-1{ left:1/12; right: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)); } }