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

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

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

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

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

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

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

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

 仔细研究┅下CSS代码，相信你会突然明白

我觉得应该是为了如果你在容器 container 里面写其他东西，不至于挨边影响美观。

最简单的莫过于的 row 了

 这个也佷简单，你看总共有那么宽bootstrap管理系统框架分别将他们分割成12份，意思是你可以随意使用者12份加起来要正好12。

不过要注意的一点是bootstrap管悝系统框架实现了更好的响应式布局，列的种类是有很多种的

这些是什么意思？如何使用的呢假设你写如下代码: 

当这两个div在row里面之后。如果是这样 这两个div在小屏幕中会排2排 因为10+3>12 ,在中等屏幕中可以排同一排 8+4=12

说白了就是在不同的宽度里面bootstrap管理系统框架将帮助你选择不同的類，你可以用这些类定义你想在不同宽度的界面排版

 其他元素则使用

这些来判断，然后各自实现自己的类即可了

不过方便你研究，代碼也顺便贴上