less實現(xiàn)bootstrap的12柵格布局，其實代碼不止100行，大概100多行吧

教程推薦：bootstrap教程

使用過bootstrap的都知道，bootstrap的強大的12柵格系統(tǒng)；在響應(yīng)式布局中這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;     padding-right: @columns-pading;     margin-right: auto;     margin-left: auto;     min-width: 960px;/*為了兼容不支持媒體選擇的瀏覽器*/     -webkit-transition:width 0.9s cubic-bezier(1,-0.02, 0, 1.04);// for Safari and Chrome     -moz-transition:width 0.9s cubic-bezier(1,-0.02, 0, 1.04);// for Firefox     -o-transition:width 0.9s cubic-bezier(1,-0.02, 0, 1.04);// for Opera     -ms-transition:width 0.9s cubic-bezier(1,-0.02, 0, 1.04);// for ie     transition:width 0.5s cubic-bezier(1,-0.02, 0, 1.04);     -webkit-box-sizing: border-box;     box-sizing:border-box;     -moz-box-sizing:border-box; } .@{container}-fluid{     min-width: 0;     width: 100%; } .row{     min-height: 1px;     margin-left: -@columns-pading;     margin-right: -@columns-pading;     clear: both;     &:before,     &:after{         content: "";         display: table;         clear: both;     } } // 列基礎(chǔ)css .columns-base-css() {     position: relative;     min-height: 1px;     padding-right: @columns-pading;     padding-left: @columns-pading;          -webkit-box-sizing: border-box;     box-sizing:border-box;     -moz-box-sizing:border-box; } // 循環(huán)列，設(shè)置基礎(chǔ)css .make-grid-columns(@len: @grid-count) {     .col(@i) {         @classList: ~".@{columns-name}-xs-@{i},.@{columns-name}-sm-@{i},.@{columns-name}-md-@{i},.@{columns-name}-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);  // 循環(huán)生成列 .make-columns-loop(@type, @n, @i: 1) when (@i <= @n){     @col-class-name: ~"@{columns-name}-@{type}";     .@{col-class-name}-@{i}{         width: @i/@n*100%;         float: left;     }     // 偏移     .@{col-class-name}-offset-@{i}{         margin-left: @i/@n*100%;     }     // 排序     .@{col-class-name}-pull-@{i}{         right: @i/@n*100%;     }     .@{col-class-name}-push-@{i}{         left: @i/@n*100%;     }     .make-columns-loop(@type, @n, (@i + 1)); } .make-columns-loop(xs, @grid-count);  // 媒體查詢 .@{container}{     @media (max-width: @screen-sm-min) {         min-width: 0;     }     @media (min-width: @screen-sm-min) {         width: 750px;         min-width: 0;     }     @media (min-width: @screen-md-min) {         width: 970px;         min-width: 0;     }     @media (min-width: @screen-lg-min) {         width: 1170px;         min-width: 0;     } } // 媒體查詢設(shè)置對應(yīng)列類型css @media (min-width: @screen-sm-min) {     .make-columns-loop(sm, @grid-count); } @media (min-width: @screen-md-min) {     .make-columns-loop(md, @grid-count); } @media (min-width: @screen-lg-min) {     .make-columns-loop(lg, @grid-count); }

這段less是可以直接復(fù)制到less環(huán)境編譯的，如果你需要重新定義類名可以在開頭修改

// 容器名 @container: m-container; // 列名 @columns-name: m-col; // 列邊距 @columns-pading: 15px; // 柵格數(shù)（把屏幕分為12份） @grid-count: 12;  // 響應(yīng)對應(yīng)尺寸 @screen-sm-min: 768px; @screen-md-min: 992px; @screen-lg-min: 1200px;

在線預(yù)覽請移步這里： http://runjs.cn/code/n1fsajds

本文轉(zhuǎn)載自：https://segmentfault.com/a/1190000010104455