bootstrap为我们内置了栅格系统布局，通过它，我们可以非常快速的在不同宽度的屏幕下进行自适应布局。
【grid栅格系统】http://v3.bootcss.com/css/#grid
【响应式工具】http://v3.bootcss.com/css/#responsive-utilities
不了解bootstrap栅格布局的同学，可以先看看上面的链接，了解个大概。
你真的了解吗？只要你了解个大概的话，就能回答的出下面几个问题，回答不出来的话，点开上面的链接好好看一遍
1)bootstrap 栅格布局把一行最多分为多少列？
2)col-xs-*类在屏幕宽度是多少时有效？
3)要想在@media (max-width:1199px) 中隐藏某个元素，用什么类名？
一、为何要引用bootstrap
现在，我们接到一个需求，要做一个响应式布局，
在 >=1200px 宽度下 ， 一行四列
在 992px~1199px 之间，一行三列
在 768px~991px 之间，一行两列
<=767px ，一行一列
如果我们手动用媒体查询写的话，由于每个媒体查询区间的都要写相应的代码，就显得很麻烦了。但是，用bootstrap的栅格布局来写，就比较方便了
二、自定义bootstrap grid栅格布局
三、bootstrap grid栅格布局无法匹配pc端设计稿
四、改进bootstrap grid栅格布局
五、与设计师的配合
六、结尾
开头的答案：
1)grid栅格布局把一行最多分为12列
2)bootstrap是以移动优先的web框架，所以col-xs-*类并没有写在媒体查询里头，而是全部宽度都可用。而col-sm-*、col-md-*、col-lg-*是写在媒体查询中的。
3)visible-lg-*，屏幕宽度小于1200px时将隐藏，*号代表inline、inline-block、block三者之一