关于bootstrap“断点划分”和“栅格宽度”的一些疑问
刚入前端,公司的新项目中打算引入bootstrap框架,最近学习bootstrap的时候,在栅格部分遇到了一些问题:
下图是bootstrap原生的栅格参数:
页面断点分别为768px,992px,1200px。
除了超小屏幕外,容器的宽度分别为750px
、970px
、1170px
,此时单列宽度(容器宽度/12,即最小栅格宽度)分别为62.5px
、80.8333...px
、97.5px
。
如此一来设计师连参考线都不好拉了,栅格中再次嵌套栅格更是噩梦。(跟设计师聊了一下,她对这样的设计方式有些排斥)
于是产生了疑问:bootstrap设计之初,为何不把容器宽度定为12的倍数(起码栅格不嵌套时都是整数像素)?还有768px、992px、1200px这样的断点设置和容器宽度设定是怎么考虑的?是不是有更合理的划分方式?
(总不是拍脑袋决定的吧...这么牛X的框架...)
这样修改后是不是更合理些:
如果不修改到设计那里像素不完整,有什么好的解决方案?
如果自己修改会不会造成更多的问题?
希望知道大家怎么解决这个问题的。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
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框架也没问题
使用bootstrap在设计前也遇到这个问题,后来仔细琢磨了下。在文档的介绍中有句这样的描述:
bootstrap只是给了一个上限值,具体使用什么样的尺寸还是让使用者根据自己的项目需要来自行设定。而嵌套中的列宽则根据百分比来设定。