刚入前端,公司的新项目中打算引入bootstrap框架,最近学习bootstrap的时候,在栅格部分遇到了一些问题:
下图是bootstrap原生的栅格参数:
页面断点分别为768px,992px,1200px。
除了超小屏幕外,容器的宽度分别为750px
、970px
、1170px
,此时单列宽度(容器宽度/12,即最小栅格宽度)分别为62.5px
、80.8333...px
、97.5px
。
如此一来设计师连参考线都不好拉了,栅格中再次嵌套栅格更是噩梦。(跟设计师聊了一下,她对这样的设计方式有些排斥)
于是产生了疑问:bootstrap设计之初,为何不把容器宽度定为12的倍数(起码栅格不嵌套时都是整数像素)?还有768px、992px、1200px这样的断点设置和容器宽度设定是怎么考虑的?是不是有更合理的划分方式?
(总不是拍脑袋决定的吧...这么牛X的框架...)
这样修改后是不是更合理些:
如果不修改到设计那里像素不完整,有什么好的解决方案?
如果自己修改会不会造成更多的问题?
希望知道大家怎么解决这个问题的。
bootstrap对很多的设计师来说确实是有抵触心理的,个人认为源头是目前国内多数设计师是“平面设计师”而不是“网页设计师”,对网页尤其是现代的响应式的网页其实并没有足够的理解。我个人的做法是大布局(比如大侧边栏的宽度)尽量精确(必要的话放弃grid布局),但局部看上去是n等分的就用grid,然后告诉设计师你的PSD画歪了,不平均,我实现成平均的了这样
说回bs,断点的设定是参考主流屏幕的,1200和992对应1280和1024两种主流分辨率(需要扣除滚动条等),每grid的宽度是声明成百分比的,代码中并没有62.5px之类的数字,而是8.33% 16.66% 25%这样的百分比,也就是所谓的“流式布局”,也只有这样才能声明一组grid类适用于任意层级的嵌套
至于自己修改参数,当然不会有任何问题,实际上bs是鼓励自定义参数的,响应式的边界,container尺寸,grid个数和间距等都可以自己调整。甚至可以直接摈弃bs的grid自己引入另一套grid框架也没问题