这是一篇搁置了很久的博文,个人实现的关键代码如下:
// 这是用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,这也是我值得思考的地方
更多专业前端知识,请上 【猿2048】www.mk2048.com