1、栅格式布局：
栅格只有12格
主要用于没有设计经验，自行设计网页。
起步： 导入一个CSS文件 和两个JS文件
BOOTATRAP.MIN.CSS --- /*IE(html5shiv.min.js -- repond.min.js)*/ -- ( jquery-1.11.2-mian.js bootstrap.min.js)
写一个在IE兼容的<meta http-equiv="X-UA-Compatible" content="IE=edge">
写移动端的代码，响应式用的<meta name="viewport" content="width=device-width, initial-scale=1">
首先禁用响应式布局：
<style type="text/css">
.container{//禁用响应式
width:1200px !important;
}
/*注释：row可以进行嵌套，可以在row中继续套个row 但是却不能嵌套.container*/
.c1{
//它的宽度 根据包裹层的宽度自动适应
}
</style>
<div class="container">
<div class="row">/*行，且必须写在container里面*/
<div class="col-xs-4 c1">/*xs sm md lg lg的宽度会在1200以上 md 的宽度会在 900多-1200之内 sm是小屏幕主要是为平板设计700-900之间 xs超小屏幕 小于700像素 为APP端,col-xs 提供不同的列*/
</div>
<div class="col-xs-1 col-xs-pull-1 c2">/*这里的xs-1中的1为所占格数 在其中写内容，块级元素内还是有间距 padding col-xs-pull-1向左拉一格 PUSH 和PULL 不会影响其它的元素 而COL-XS-OFFSET-2 推 会影响相邻元素的位置*/
</div>
<div class="col-xs-1 col-xs-push-4 c3"></div>/*如果超出了12格，那么就会换行，但是这样做是不对的，如果在需要换行 那么只需要在加一个DIV里面嵌入一个ROW col-xs-push-4这个是将这个块级元素向右推4格*/
</div>
</div>