less实现bootstrap的12格布局。其实代码100多行，大概100行。用过bootstrap的都知道bootstrap有强大的12格系统；这12种网格布局在响应式布局中非常有用。有时候想做一个简单的页面，不想把所有的bootstrap都引入到页面中，所以业余时间写了这个网格布局，参考了bootstrap的做法，类名，当然类也可以自定义在这里命名。详细less请看如下：@container:m-container;@columns-name:m-col;@columns-pading:15px;@grid-count:12;@screen-sm-min:768px;@screen-md-min:992px;@screen-lg-min:1200px;.@{container},.@{container}-fluid{padding-left:@columns-pading;填充右：@columns-pading；右边距：自动；左边距：自动；min-width:960px;/*为了兼顾不支持媒体选择的浏览器*/-webkit-transition:width0.9scubic-bezier(1,-0.02,0,1.04);//forSafariandChrome-moz-transition:width0.9scubic-bezier(1,-0.02,0,1.04);//对于Firefox-o-transition:width0.9scubic-bezier(1,-0.02,0,1.04);//对于Opera-ms-transition:width0.9scubic-bezier(1,-0.02,0,1.04);//对于ietransition:width0.5scubic-bezier(1,-0.02,0,1.04);-webkit-box-sizing：边框框；框大小：边框框；-moz-box-sizing:border-box;}.??@{container}-fluid{最小宽度：0;宽度：100%；}.row{最小高度：1px；左边距：-@columns-pading；右边距：-@columns-pading；氯耳朵：两者；&:before,&:after{内容：“”；显示：表格；明确：两者；}}//列基css.columns-base-css(){position:relative;最小高度：1px；填充右：@columns-pading；左填充：@columns-pading；-webkit-box-sizing：边框框；框大小：边框框；-moz-box-sizing:border-box;}//循环，设置基础css.make-grid-columns(@len:@grid-count){.col(@i){@classList:~".@{列名}-xs-@{i},.@{列名}-sm-@{i},.@{列名}-md-@{i},.@{列名}-lg-@{i}";.col(@i+1,~"@{classList}");}.col(@i,@list)when(@i=<@len){@classList:~".@{columns-name}-xs-@{i},.@{columns-name}-sm-@{i},.@{columns-name}-md-@{i},.@{columns-name}-lg-@{i}";.col(@i+1,~"@{classList},@{list}");}.col(@i,@list)when(@i>@len){@{list}{.columns-base-css();}}.col(1)}.make-grid-columns(@grid-count);//循环生成列.make-c列循环(@type,@n,@i:1)when(@i<=@n){@col-class-name:~"@{columns-name}-@{type}";.@{col-class-name}-@{i}{width:@i/@n*100%;向左飘浮;}//偏移.@{col-class-name}-offset-@{i}{margin-left:@i/@n*100%;}//排序.@{col-class-name}-pull-@{i}{right:@i/@n*100%;}.@{col-class-name}-push-@{i}{左：@i/@n*100%；}.make-columns-loop(@type,@n,(@i+1));}.make-columns-loop(xs,@grid-count);//媒体查询.@{container}{@media(最大宽度:@screen-sm-min){最小宽度:0;}@media(最小宽度:@screen-sm-min){宽度:750px;最小宽度：0；}@media(最小宽度:@screen-md-min){宽度:970px;最小宽度：0；}@media(最小宽度:@screen-lg-min){宽度:1170px;最小宽度：0；}}//媒体查询设置对应类型css@media(min-width:@screen-sm-min){.make-columns-loop(sm,@grid-count);}@media(min-width:@屏幕-md-min){.mmake-columns-loop(md,@grid-count);}@media(min-width:@screen-lg-min){.make-columns-loop(lg,@grid-count);}少就是了可以直接拷贝到less环境下编译。如果需要重新定义类名，可以在开头修改//容器名@container:m-container;//列名@columns-name:m-col;//列边距@columns-pading:15px;//网格数（将屏幕分成12份）@grid-count:12;//响应对应尺寸@screen-sm-min:768px;@screen-md-min:992px;@screen-lg-min:1200像素；在线预览请点击：http://runjs.cn/code/n1fsajds
