前端|响应式开发之布局容器

欢迎点击「算法与编程之美」↑关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

问题描述

在前面学习了响应式布局原理，简单的了解了一下响应式布局许多功能及其原理，今天来学习一下响应式布局中的布局容器。

解决方案

响应式布局和之前的开发布局有着很多不同的地方，在做响应式开发的时候会用的一个大的布局容器，在做响应式布局开发的时候会用到一个框架——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 效果图

123                                                  123

从上面的效果图中可以大致看出两种布局的区别，需要注意的是container类默认外边距为15px。

结语

从上面的两种布局来看，在做响应式开发的时候可以选择container类，如果单独做移动端的开发可以选择container-fluid类。

END

编  辑   |   王楠岚

责  编   |   桂   军

 where2go 团队

---

   

微信号：算法与编程之美          

长按识别二维码关注我们!

温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！