[BS4]设计师在视觉阶段要怎么套用Bootstrap网格系统？-1

前言

我是平面设计出身的，随着网路时代的发展，渐渐的从平面转数位广告视觉甚至网页视觉设计。

身为一个设计师，我一直很希望我设计的东西能够让前端工程师能切得更顺利，(当然也减少他们一直退我件教我修改或是补东西的机率....)，除了图层命名好，该做hover元件跟下拉选单展开后的元件也不能少，其次就是常被诟病的「你这样排，要怎么RWD？！」

所以我刚开始听说Bootstrap 4这套框架时觉得很神，只要照他的网格排版，RWD小事一桩！所以我就一直很想搞懂它，但我从没搞懂过！从没！网路上看了很多篇文章看来看去似懂非懂，直到我开始接触前端。

所以我写下这篇，是想帮助跟我有同样困扰的设计师们。

内文

原理我就不说了，只讲视觉上要怎么排版，排版原则是什么。
1.内容最大宽度是1140px

2.1140px左右内缩15px是预设的网页边界留白
3.然后再分成12格，每格宽度65px(Column Width)，间距是30px(Gutter Width)

我们的内容只要照格线走，就会很好切版

就是这么简单！

所以如果你要拉一个参考线的话，请拉1140px宽，左右先拉15px进来之后，再拉12个65px宽的格子，格子与格子之间的间隔是30px。
我个人喜欢用illustrator的「分割成网格」功能，用一个1110px宽的方块配上物件>路径>分割成网格
然后照我这样设定，就可以轻鬆快速地拉出BS4的网格参考线来唷！

Q&A

那那些飞来飞去的装饰元件怎么办，也要对齐网格吗？答：不用，那些东西可以不用受网格限制影响，但飞来飞去的东西越多，切起来越麻烦....我可以让东西超出网格一点吗？答：如果只超出的範围在15px以内还好解决，因为两个65px之间的间距其实是15+15=30px，他是左边人左右推15px，右边那个人也左右推15px推出来的两个人的间距，所以有时候设计的东西可以跑出网格範围一点点，但如果你没有特别注明，工程师应该会帮你把它塞回去。
电脑版我看懂了，那手机版RWD要怎么排？答：这个我们下一篇再解释。