因为响应式结构需求性较大，很多网站和页面都开始趋向于响应式结构，需要根据手机端和pc端的不同进行页面的不同展示。栅栏式结构作为主流响应式模板搭建在效果图设计的时候也需要注意。
工具/原料
ps
方法/步骤
1
1.首先我们要了解什么是栅栏式结构。Boostrap的结构模式将整个页面分成12份，也就是12个栅栏，我们在设计效果图的时候，最好是以12位基本进行各个部分的模块大小进行设计。
2
2.关于boostrap的结构，设计效果图还需要根据不同页面的展示进行设计，如col-xs是在小于768，而col-sm是在992以内，其余col-md是在992以上。
3
3.栅栏式结构通常根据不同，会占比12份、6份、4份、3份、2份和1份，所以在布局的时多以相应数据出现。如在menu列表的时候，就会有6个菜单。
4
4.对于页面内部或者说主流部分，也应该根据栅栏式结构的不同进行设计。以首页为例，展示的热销设备如下图的pc端是6个每行，ipad端是3个每行，而在手机端则可以是2个每行。col-xs-6 col-sm-4 col-md-2，如下图ipad端显示情况
5
5.对于内部结构是三个的，如下图pc端显示分为三部分，也就是每个部分占比为4份，在ipad端的时候，就可以占比6份，实现两行显示，而在手机端的时候显示占比12份，实现三行显示。
6
6.列表页也可分为左右结构和平铺结构，在大于sm占比之前，都以4:8或者2:10的结构进行占比，在xs的时候以12:12的结构占比。
7
7.对于内页，多以占比12份进行显示 ，很少分为左右结构，而是全部平铺的结构显示。有助于boostrap的编写和代码的精简。
上一篇：怎么找电视墙装修效果图
下一篇：怎样合理安排武当山二日游的行程