1.第一步：创建栅格系统的容器
<div class="container-fluid"> <div class="row"> ... </div> </div>
解释：为了给予栅格系统合适的排列和padding,要把row包含在一个容器中，而这个容器必须命名为class='container'或者class='container-fluid'这两个是bootstrap默认的，照着写就可以了，这两者的区别大家自己亲自去试一下就知道了。效果很明显，这里就不多说了
2.第二部：创建栅格系统
<div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div>解释：上面的每一个row代表一行。col-md-数字，代表列（单元） ，bootstrap默认把每一行分成12分。col-md-数字（数字数多少就代表占几个单元格），
效果图：
当然了。单元格的类还有其他几种
.col-xs- 无论屏幕宽度如何，单元格都在一行，宽度按照百分比设置；试用于手机；
.col-sm- 屏幕大于768px时，单元格在一行显示；屏幕小于768px时，独占一行；试用于平板；
.col-md- 屏幕大于992px时，单元格在一行显示；屏幕小于992px时，独占一行；试用于桌面显示器；
.col-lg- 屏幕大于1200px时，单元格在一行显示；屏幕小于1200px时，独占一行；适用于大型桌面显示器；这里如果你想要让你写的样式使用与多设备，就可以把他们都写上
例如<div class='row'>
<div class="col-md-8 col-xs-8 col-sm-8 col-lg-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div></div>
这样，bootstrap样式就会根据你具体的屏幕大小，自动使用对应的栅格类，占用对应的单元格数。来达到简单的响应式布局。
具体占用几个单元格，大家自己根据实际情况，自己调整，这里只是举个例子。