bootstrap栅格系统底层设计原理 转及总结】Bootstrap 框架 栅格布局系统底层设计原理

如果你是初次接触Bootstrap，你一定会为它的栅格布局感到敬佩。事实上，这个布局系统提供了一套响应式的布局解决方案。

既然这么好用，那他是如何用CSS来实现的呢？

我特意去Bootstrap官方下载了源代码进行分析了一番，看完之后果然有了收获，不过我只看了栅格布局的那块代码，其实也很简单，不必担心不懂，你只需要要基础的CSS知识即可。

前提条件（Bootstrap 自带）

首先使用这个布局之前要定义一下代码：

这行代码如果不懂，可以搜索一下，总之大致意思就是，被定义的元素的内边距和边框不再会增加它的宽度，不加入的话排版会有问题。

不过，Bootstrap自己当然已经加入了，如果你是使用整个Bootstrap框架，那你可以无视这里，只是让你明白需要一个这个。

我是将Bootstrap框架里面的布局代码分割出来，形成一个小体积的仅有css文件的小框架（下载地址见最后），以后写单页小网站方便用。

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

容器 container

container 的设计大致如下：

代码实现：

这里实现了依据不同的宽度进行改变：

http://pan.baidu.com/s/1dEM0pXJ 密码: ywd9

参考：https://www.cnblogs.com/sivkun/p/7434986.html