欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

用 less 自制 bs 栅格布局

程序员文章站 2022-03-22 09:54:34
用 less 自制 bs 栅格布局/* 全局设置 reset.css normalize.css */@import "normalize";* { box-sizing: border-box;}/* 清除浮动 */.clearfix { &:after { content: ""; display: block; clear: both; }}/* 变量声明 1200 992 768 */// 屏幕的阈值@...

用 less 自制 bs 栅格布局

/* 全局设置 reset.css  normalize.css */
@import "normalize";

* {
  box-sizing: border-box;
}

/* 清除浮动 */
.clearfix {
  &:after {
    content: "";
    display: block;
    clear: both;
  }
}

/* 变量声明
    1200
    992
    768
 */
// 屏幕的阈值
@screen-lg: 1200px;
@screen-md: 992px;
@screen-sm: 768px;

// container 容器的宽度
@container-lg-width: 1170px;
@container-md-width: 970px;
@container-sm-width: 750px;

// 列宽
@grid-gutter-width: 30px;

// 总的列数
@grid-columns: 12;

/* 实现 */
.mark-container() {
  // container 容器的实现
  .container {
    .container-common-style();
    // 清除浮动
    //.clearfix();
    &:extend(.clearfix all);

    // 小屏幕 container 的宽度
    @media (min-width: @screen-sm) {
      width: @container-sm-width;
    }

    // 中屏幕 container 的宽度
    @media (min-width: @screen-md) {
      width: @container-md-width;
    }

    // 大屏幕 container 的宽度
    @media (min-width: @screen-lg) {
      width: @container-lg-width;
    }
  }

  // container-fluid 容器的实现
  .container-fluid {
    .container-common-style();
    &:extend(.clearfix all);
  }

  // 混合
  .container-common-style() {
    margin-right: auto;
    margin-left: auto;
    padding-left: @grid-gutter-width * (1/2);
    padding-right: @grid-gutter-width * (1/2);
  }
}
.mark-container();

// 2. 行的设置
.make-row() {
  .row {
    margin-left: -@grid-gutter-width * (1/2); // -15px
    margin-right: -@grid-gutter-width * (1/2);
  }
}
.make-row();

// 3.列的实现
// 公共样式  1,2,3,4,5,6,7,8,9,10,11,12  .col-xs-1 ... col-xs-12
.make-grid-columns() {
  .col(@index) {
    // @index  2     1
    @selector: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
    .col(@index+1, @selector);
  }
  //     2       1
  .col(@index, @list) when (@index <= @grid-columns) {
    // 变量拼接
    @selector: ~"@{list},.col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; // 1,2 ==> 1,2,3
    // 调用自己
    .col(@index+1, @selector);
  }
  .col(@index, @list) when (@index > @grid-columns) {
    @{list} {
      padding-left: @grid-gutter-width * (1/2);
      padding-right: @grid-gutter-width * (1/2);
      position: relative;
      min-height: 1px;
      float: left;
    }
  }
  .col(1);
}
.make-grid-columns();

// 超小屏幕的宽度设置  .col-xs-1{width: }  .col-xs-2{}
.make-column-width(@type) {
  .col(@index) when (@index <= @grid-columns) {
    // 拼接
    @selector: ~".col-@{type}-@{index}"; // col-xs-1
    @{selector} {
      @w: @index * (1/@grid-columns) * 100;
      width: ~"@{w}%";
    }
    // 递归调用
    .col(@index+1);
  }
  .col(1); // 1 ==> .col-xs-1
}
.make-column-width(xs);

// 超小屏幕下的偏移设置
.make-column-offset(@type) {
  .col(@index) when (@index <= @grid-columns) {
    // 拼接
    @selector: ~".col-@{type}-offset-@{index}"; // col-xs-1
    @{selector} {
      @w: @index * (1/@grid-columns) * 100;
      width: ~"@{w}%";
    }
    // 递归调用
    .col(@index+1);
  }
  .col(1); // 1 ==> .col-xs-1
}
.make-column-offset(xs);

// 媒体查询阶段 小屏幕的情况
@media (min-width: @screen-sm) {
  // .col-sm-1 ...... .col-sm-12
  // .col-sm-offset-1 ...... .col-sm-offset-12
  .make-column-width(sm);
  .make-column-offset(sm);
}

// 媒体查询阶段 中屏幕的情况
@media (min-width: @screen-md) {
  // .col-md-1 ...... .col-md-12
  // .col-md-offset-1 ...... .col-md-offset-12
  .make-column-width(md);
  .make-column-offset(md);
}

// 媒体查询阶段 大屏幕的情况
@media (min-width: @screen-lg) {
  // .col-lg-1 ...... .col-lg-12
  // .col-lg-offset-1 ...... .col-lg-offset-12
  .make-column-width(lg);
  .make-column-offset(lg);
}

本文地址:https://blog.csdn.net/Cool_breeze_/article/details/111829904

相关标签: Less