响应式设计(2)--引入bootstrap栅格布局

标签：

　　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三者之一

响应式设计(2)--引入bootstrap栅格布局

标签：

原文地址：http://www.cnblogs.com/cutPicturesMan/p/5490145.html