摘要：實(shí)現(xiàn)的柵格布局，其實(shí)代碼不止行，大概多行吧使用過的都知道，的強(qiáng)大的柵格系統(tǒng)在響應(yīng)式布局中這柵格布局是非常有用的。

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

使用過bootstrap的都知道，bootstrap的強(qiáng)大的12柵格系統(tǒng)；在響應(yīng)式布局中這12柵格布局是非常有用的。
有時(shí)候做個(gè)簡單的頁面并不想把所有整個(gè)bootstrap引入到頁面中，于是便在空余時(shí)間寫了這個(gè)柵格布局，參照了bootstrap的做法，類名，當(dāng)然這里可以自定義類名的。

詳細(xì)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