一楼求眼熟
首先感谢各位关注我的帖子，2014年因为公司项目开发任务紧急所以没有时间更新，所以暂停了好久
因为我不是专业搞前端的，也是一边学一边用有些地方不是很熟悉，建议有钱的可以去买《深入理解bootstrap》一书来学习，我目前就是在跟着这本书自学，大部分案例来源于此书勿喷，请各位前辈多多指教，我的帖子是以一个初学者的角度来写的，请各位手下留情

废话不多说，继续上一篇的，本篇讲栅格化系统的应用。
其实栅格系统就是不同的列组合。列组合在基本用法里有四种特性，因为bootstrap具有响应式特征，所以配合起来便能组合出强大的功能。下面我们分别简述一下基本的列组合：
一、列组合
简单来说就是合并列，功能跟co
lsp
an类似，html代码如下（根据官网的样式举例）：
<div class="container">
<div class="row">
<div class="col-md-1" style="background:#CCC">col-md-1</div>
<div class="col-md-1" style="background:#CCC">col-md-1</div>
<div class="col-md-1" style="background:#CCC">col-md-1</div>
<div class="col-md-1" style="background:#CCC">col-md-1</div>
<div class="col-md-1" style="background:#CCC">col-md-1</div>
<div class="col-md-1" style="background:#CCC">col-md-1</div>
<div class="col-md-1" style="background:#CCC">col-md-1</div>
<div class="col-md-1" style="background:#CCC">col-md-1</div>
<div class="col-md-1" style="background:#CCC">col-md-1</div>
<div class="col-md-1" style="background:#CCC">col-md-1</div>
<div class="col-md-1" style="background:#CCC">col-md-1</div>
<div class="col-md-1" style="background:#CCC">col-md-1</div>
</div>
<div class="row" >
<div class="col-md-8" style="background:#03F">col-md-8</div>
<div class="col-md-4" style="background:#03F">col-md-4</div>
</div>
<div class="row" >
<div class="col-md-4" style="background:#F00">col-md-4</div>
<div class="col-md-4" style="background:#F00">col-md-4</div>
<div class="col-md-4" style="background:#F00">col-md-4</div>
</div>
<div class="row" >
<div class="col-md-6" style="background:#CCC">col-md-6</div>
<div class="col-md-6" style="background:#CCC">col-md-6</div>
</div>
</div>
下面是效果图：
这里涉及到的CSS特性只有两个：左浮动和百分比。在css源码可以看到
这个样式定义确保了每个列都是左浮动
在样式的下边根据每个列的长度定义不同的百分比

列偏移（offset属性）
原来我们在做两个单元格之间有空隙的时候，用的是margin或者padding边距来控制，在bootstrap里面栅格系统已经为我们定以好了不再需要定义mragin值。
使用 .col-md-offset-*的形式可以将列偏移到列的右侧。
如上图第一列的12个列去掉2个用来应用列偏移，分别给第2、3个列应用偏移一个中度列的样式，空白则是偏移的长度。
在之前的代码上修改一下：
<div class="row">
<div class="col-md-1" style="background:#CCC">col-md-1</div>
<div class="col-md-1 col-md-offset-1" style="background:#CCC">col-md-1</div>
<div class="col-md-1 col-md-offset-1" style="background:#CCC">col-md-1</div>
<div class="col-md-1" style="background:#CCC">col-md-1</div>
<div class="col-md-1" style="background:#CCC">col-md-1</div>
<div class="col-md-1" style="background:#CCC">col-md-1</div>
<div class="col-md-1" style="background:#CCC">col-md-1</div>
<div class="col-md-1" style="background:#CCC">col-md-1</div>
<div class="col-md-1" style="background:#CCC">col-md-1</div>
<div class="col-md-1" style="background:#CCC">col-md-1</div>
</div>
这样我们有多少个offset就相当于有多少个margin-left

列嵌套
如上图我们将第二行的蓝色部分划分为两部分 9和3
在9里面嵌套两个6 我们发现嵌套的两个列是按照9的长度进行十二等分，也就是说嵌套内部的元素都会按照外部长度进行十二等分划分列，这样我们就可以组合出更多的样式
代码如下
<div class="row" >
<div class="col-md-9" style="background:#03F">嵌套
<div class="row">
<div class="col-md-6">col-md-6</div>
<div class="col-md-6">col-md-6</div>
</div>
</div>
<div class="col-md-3" style="background:#03F">col-md-3</div>
</div>
列排序（push pull样式属性）
如上图，我们想将第一行的9和3换位，第二行是我们的过程 我们通过将9列向右推和
将3列向左拉的方式进行换位，得到第三行的结果
这里为什么不用左右浮动的属性呢？是因为所有列都是默认左对齐如果要使用浮动，那改动量你懂得。。。。
好了 本帖更新到这里 下一篇从响应式来介绍，欢迎大家一起交流~~~~

前排

顶一下