网页布局大致分为以下三种：
1.早前使用的TABLE做布局
优势：简单不易出错，不足：加载效率不佳
2.使用DIV+CSS做布局
优势：加载速度快，灵活；不足：不易控制
3.使用Bookstrap提供的栅格（Grid Layout）布局系统
优势：加载数据快、灵活、支持响应式功能、容易控制（有行/列的概念，使用div+css实现）
栅格布局系统特点：
一，所有容器行必须放在容器中：container或container-fluid
二，分为多行（row），一行中平均分为12列（col）
三，网页内容只能放在列（col）中，不能直接放在行（row）
四，可以在col中在嵌套row
五，col分为四大类：col-xs col-sm col-md col-lg
六，可以为一个列指定不同屏幕下的不同宽度
七，col-*-1~12，值为1-12，
八，col-lg-*：只对大PC屏幕有效；col-md-*：对普通PC和大PC屏幕都有效；col-sm-*：对平板、PC、大PC屏幕都有效；col-xs-*：对手机，平板，PC，大PC屏幕都有效
九，.hidden-lg 当前列只在大PC屏幕下隐藏；.hidden-md 当前列只在PC屏幕下隐藏；.hidden-sm 当前列只在平板屏幕下隐藏；.hidden-xs 当前列只在手机屏幕下隐藏
十，.col-md[或者lg或者sm或者xs]-offset-1~12；移动过多少个格
十一，
.col-lg-push-* 在lg屏幕下将列向右推指定的宽度
.col-lg-pull-* 在lg屏幕下将列向左拉指定的宽度
.col-md-push-* 在md/lg屏幕下将列向右推指定的宽度
.col-md-pull-* 在md/lg屏幕下将列向左拉指定的宽度
.col-sm-push-* 在sm/md/lg屏幕下将列向右推指定的宽度
.col-sm-pull-* 在sm/md/lg屏幕下将列向左拉指定的宽度
.col-xs-push-* 在xs/sm/md/lg屏幕下将列向右推指定的宽度
.col-xs-pull-* 在xssm/md/lg屏幕下将列向左拉指定的宽度
container的宽度问题：
当屏幕宽度>1200px（超大PC显示器-lg）： 容器宽1170px
当屏幕宽度>992px（普通PC显示器-md）: 容器宽970px
当屏幕宽度>768px（平板显示器-sm）: 容器宽750px
当屏幕宽度<768px（手机显示器-xs）: 容器宽auto
.container-fluid的宽度： width: auto; + before + after