在编写网页的时候，总是需要对网页进行分块布局，如果编写网页的时候使用的是bootstrap的CSS样式表，那么肯定会用到bootstrap的栅格系统，bootstrap的栅格系统乍一看来比较难以理解，但是功能却是非常强劲的。用起来非常方便。

bootstrap中的栅格系统会根据浏览器的窗口大小来改变div的比例，使网页总能根据网页的变化而自适应，所以使用bootstrap栅格系统不需要对任何额外的编写和测试，就可以轻松编写出响应式网页。

要开始编写，首先需要满足这几点：

1.加入bootstrap的CSS样式表。

2.在网页head部分加上获取浏览器尺寸的语句

<meta name="viewport" content="width=device-width, initial-scale=1">

bootstrap的的栅格系统在bootstrap的官方网站上的说明不是很通俗，其实栅格系统其实就是没有视觉样式的div，实际在网页上布设栅格系统的时候，是不会产生如官网案例上的类似表格一样的背景和边框。

如果要使几个div放置在同一层，需要在这些div之外增加一个class为row的div。

栅格系统将同一列（row）的网页分为12个单位，用户可以按照比例将网页设计成不同比例，表现的方式是在同一列的div中添加这样的class：“col-md-*”，星号部分填写数字，但是同一行的数字相加要等于12，比如说，我打算将同一行的两个div平均划分，则需要这样编写：

如果你这样做了，你可以将这两块div涂色，然后调整自己的浏览器尺寸查看一下效果，你会发现，在浏览器缩小到一定程度的时候，这两块div会自动掉下去，变成竖列排列。这就是自适应的效果，但是如果你不希望出现这样的效果的话，也是可以调整的。

bootstrap的栅格系统提供了四种方案，分别为：超小屏幕 手机 (<768px)，小屏幕 平板 (≥768px)，中等屏幕 桌面显示器 (≥992px)，大屏幕 大桌面显示器 (≥1200px)准备了方案。

具体使用方式是，可以设置.col-xs-，.col-sm-，.col-md-，.col-lg- 前缀。

效果可以更改在达到四种分辨率的时候，div的表现形式。

比如说，我想让网页在缩小到最小(<768px)的时候，总是保持两栏并列。可以这样写：

具体的表格如下：

因此，如果要修改一个div在各种屏幕下的表现形式的话，只需要设置全所有的样式即可。

如果需要对div有其他的要求的话，比如说偏移浮动的效果，同样可以修改class来改变样式。这一部分比较好理解，所有这里也不多言了。详情还是查看官方文档。