Null's Blog

CSS响应式的基石栅格系统

关于bootstrap

谈起这个大名鼎鼎的前端框架,绝大多数人前端甚至后端都可能使用过,无论大家是为了使用其优秀设计的哪一个方面,都会喜欢其12格的栅格系统。我不确认12格是否是其首创,但该设计思路还是相当优雅的,至少,提供给大家一个设计范例。但至于能不能用好其响应式的特性,我却有自己的想法。当然,本篇博客暂不讨论它的“响应式”,而是讨论“响应式”的前置条件栅格系统
目前,bootstrap已经发展到3+版本,不在兼容IE8及更老版本的浏览器,如需强行使用,请使用2+版本或使用网友开发的兼容库。对于bootstrap这个决定,本人还是极其支持的。

bootstrap中的栅格的几种类型

  • col-xs:超小屏幕 手机 (<768px)
  • .col-sm: 小屏幕 平板 (≥768px)
  • .col-md:中等屏幕 桌面显示器 (≥992px)
  • .col-lg:大屏幕 大桌面显示器 (≥1200px)

后面跟一个具体的数字,如果是4,则占4/12 大约33.3333%的宽度。

我的实现

我的想法是自己实现这个栅格系统,一下代码很好理解,模拟12格,左浮动,并且在.row上清楚浮动:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.row{ padding:15px 10px 0; clear:both; line-height:30px;}
.row:after{ content:"."; display:block; height:0; clear:both; visibility:hidden;}
.row .col-xs-1{ width:8.33333333%;}
.row .col-xs-2{ width:16.66666667%;}
.row .col-xs-3{ width:25%;}
.row .col-xs-4{ width:33.33333333%;}
.row .col-xs-5{ width:41.66666667%;}
.row .col-xs-6{ width:50%;}
.row .col-xs-7{ width:58.33333333%;}
.row .col-xs-8{ width:66.66666667%;}
.row .col-xs-9{ width:75%;}
.row .col-xs-10{ width:83.33333333%}
.row .col-xs-11{ width:91.66666667%;}
.row .col-xs-12{ width:100%;}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12{
float:left; position:relative; padding-top:1px;
}

而日常使用中,这个栅格系统其实并不是那么“好用”。
因为,设计的想法可能天马星空:

  • 5等分一行(5%12!=0 12格无法除尽这种情况)
  • 每格之间有一定间距并且这个间距

如下图(这里暂时用这张,5等分按钮自行脑补):
grid
不可否认,这种间距也手写也是完全可以的,但既然使用了栅格系统,何不把这个也用“栅格”的思想去实现,并且优雅的解决“栅格”之间的间距问题?
所以我并不满意这个简单的栅格,如果业务是运行在手机端或者是现代浏览器下,我会再加入flex分隔,这样基本能满足各种等分的设计了,并且自认为比较优雅的解决了“栅格”之间的间距问题(我觉得这里使用padding不合适,毕竟理解上来说,padding属于内边距):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.flex-group{
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-box;
display: flex;
margin:5px 0;
}
.flex-1{
-webkit-box-flex:1;
-webkit-flex:1;
-moz-flex:1;
-ms-flex:1;
flex:1;
}
.flex-2{
--webkit-flex:2;
-moz-flex:2;
-ms-flex:2;
flex:2;
}
.flex-3{
-webkit-flex:3;
-moz-flex:3;
-ms-flex:3;
flex:3;
}
.flex-4{
-webkit-flex:4;
-moz-flex:4;
-ms-flex:4;
flex:4;
}
.buttons-group input+input,
.buttons-group input+a,
.buttons-group a+a,
.buttons-group a+input{
margin-left:5px;
}

当然这个flex属性也是只被现代浏览器兼容,但我为何不直接使用space-between去处理这个间距问题呢?因为现阶段的手机浏览器,比如android与ios并不完整支持,各位也可以自行尝试:
caniuse
所以这里再次做了个妥协,使用css + 选择器从第二个元素开始出现间距
到此为止,我才比较满意我的“栅格”系统。如果有可能,接下来还会有几篇关于css响应式的博文,介绍bootstrap的响应式具体是如何实现的,并提出我自己的使用见解。