众所周知,现在前端有很多类似于bootstrap,foundation这样优秀的UI框架,它们都提供了自己的一套响应式布局方案,即栅格系统。用过的人都知道只要给页面的元素添加其栅格系统指定的类名,就能达到你想达到的响应式布局效果,简洁而优雅。笔者有很长一段时间不明白栅格系统是基于什么样的原理实现,遂分析了一下主流框架的源码,发现其实并不复杂,甚至自己也可以实现一套很简单的栅格系统。
一、Bootstrap
bootstrap的栅格系统用于通过一系列的行(row)与列(col-*)的组合来创建页面