|
问题描述 在前面学习了响应式布局原理，简单的了解了一下响应式布局许多功能及其原理，今天来学习一下响应式布局中的布局容器。 解决方案 响应式布局和之前的开发布局有着很多不同的地方，在做响应式开发的时候会用的一个大的布局容器，在做响应式布局开发的时候会用到一个框架——Bootstarp前端开发框架。这个框架将需要的页面内容和栅格系统包裹一个.container容器，Bootstartp预先定义好了这个类，叫.container它提供了两个作此用处的类。使用的时候必须叫这个名字，因为bootstarp事先将这个类定义好了，所以必须叫做.container 首先看第一个叫做container类，这个container类就是响应式的布局容器，它的宽度是固定死的，就和在前面的响应式布局原理中看到的图片是一样的。 （1）大屏（>=1200px）宽度为1170px （2）中屏（>=992px）宽度为970px （3）小屏（>=768px）宽度为750px （4）超小屏（100%） 所以在使用的时候只需要在Bootstarp页面中写入.container类，就再也不需要写媒体查询了，所以称这个类为预定义类，在Bootstarp中有很多这样的预定义类，只需要了解这个类怎么使用以及这个类实现了什么功能就可以了。在之前的响应式布局中还需要手动去写，在不同的尺寸下划分为不同的档位，在当然尺寸是可以随便划分的，但在Bootstarp是规定了这四个档位，就只用这四个就可以了。 图2.1 效果图 图2.2 效果图 图2.3 效果图 从上面的三张图中可以看到这几张图的大概效果。 还有一种布局是container-fluid类，这种布局的特点是： （1）流式布局容器百分百宽度 （2）占据全部视口（viewport）的容器 （3）适合于单独做移动端开发 图2.3 效果图
从上面的效果图中可以大致看出两种布局的区别，需要注意的是container类默认外边距为15px。 结语 从上面的两种布局来看，在做响应式开发的时候可以选择container类，如果单独做移动端的开发可以选择container-fluid类。 编 辑 | 王楠岚 责 编 | 桂 军 where2go 团队 |
|
|
