尝试实现bootstrap3网格系统

这是一篇搁置了很久的博文，个人实现的关键代码如下：

// 这是用sass实现的，只是大致实现了网格系统和offset的功能

$size_list: (

    xs:  0,

    sm: 576,

    md: 992,

    lg: 1200

);

//为col数从1到12的网格分别设置适当的宽度，并且响应式布局为四种size

@each $key, $value in $size_list {

    @for $i from 1 through 12 {

        @media (min-width: #{$value}px) {

            .col-#{$key}-#{$i} {

                width: 100% * ($i / 12);

            }

            .col-#{$key}-offset-#{$i} {

                margin-left: 100% * ($i / 12);

            }

        }

    }

}

我的一些思路

其实只要拿占列数去除以栅格总数，就能得到要offset和col的宽度
sass很强大，通过遍历，省去了大量的css代码

个人认为待改进的

12不是写死的，而是可以是任意数目
boostrapv4是用flex实现的网格系统，考虑渐进增强，旧浏览器用float布局，新浏览器用flex布局
boostrapv3源码对栅格系统的功能做了很多分层，按功能划分了很多可复用的mixins，这也是我值得思考的地方

巴特西

尝试实现bootstrap3网格系统

我的一些思路

个人认为待改进的

最新文章

热门文章