부트스트랩 그리드 레이아웃을 구현하는 데 필요한 100줄 미만의 코드

less는 부트스트랩의 12그리드 레이아웃을 구현합니다. 실제로 코드는 100줄 이상, 아마도 100줄 이상일 것입니다.

추천 튜토리얼: 부트스트랩 튜토리얼

부트스트랩을 사용해 본 사람이라면 누구나 알고 있을 것입니다. 강력한 12개 그리드 레이아웃 그리드 시스템: 이 12개 그리드 레이아웃은 반응형 레이아웃에 매우 유용합니다.
간혹 간단한 페이지를 만들 때 페이지에 모든 부트스트랩을 소개하고 싶지 않아서 남는 시간에 부트스트랩 메서드와 클래스 이름을 참고하여 이 그리드 레이아웃을 작성했습니다. 물론 클래스 이름은 다음과 같을 수 있습니다. 여기에서 맞춤 설정하세요.

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;
    }
}
// 列基础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;
}
// 循环列，设置基础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);

// 循环生成列
.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;
    }
}
// 媒体查询设置对应列类型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는 컴파일을 위해 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: 1200px;

온라인의 경우 미리보기는 여기로 가십시오: http: //runjs.cn/code/n1fsajds

이 기사는 https://segmentfault.com/a/1190000010104455

더 많은 프로그래밍 관련 지식을 보려면 다음을 방문하십시오: 프로그래밍 입문! !

위 내용은 부트스트랩 그리드 레이아웃을 구현하는 데 필요한 100줄 미만의 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!