bootstrap学习笔记(五)栅格系统用法

栅格系统的使用其实就是栅格的列的不同组合方式.

• 列的组合
  上代码:
  <div class='container'>
  <div class='row'>
  <div class='col-md-1'>1</div>
  .......省略10个跟上面一样的div
  <div class='col-md-1'>12</div>
  </div>
  <div class='row'>
  <div class='col-md-8'>1</div>
  <div class='col-md-4'>2</div>
  </div>
  <div class='row'>
  <div class='col-md-6'>1</div>
  <div class='col-md-6'>2</div>
  </div>
  </div>
  上面的代码总共有三行,第一行有12列,第二行有两列,第三行有两列,但是第二行和第三行的列宽度是不一样的.

• 列偏移
  有时候我们不想让两块内容连在一起,这时候可以用栅格系统的偏移来实现.在bootstrap中定义一系列的col-md-offset-*形式的样式来实现偏移效果.
  上代码:
  <div class='container'>
  <div class='row'>
  <div class='col-md-4'>第一列</div>
  <div class='col-md-4 col-md-offset-4'>第二列</div>
  </div>
  </div>
  上面的代码只有两列,第一列靠最左边,第二列在行的最右面,中间相差4个栅格.
  实际上col-md-offset-4是通过margin-left来实现的
  例如: col-md-offset-4的源码是这样的
  .col-md-offset-4{margin-left:33.333333333333333%;}

• 列嵌套
  栅格系统也支持列嵌套,也就是在一个列里面再添加一个row.
  上代码:
  <div class='container'>
  <div class='row'>
  <div class='col-md-9'>
  这是第一列
  <div class='row'>
  <div class='col-md-6'>第一列里面嵌套的行的第一列</div>
  <div class='col-md-6'>第一列里面嵌套的行的第二列</div>
  </div>
  </div>
  <div class='col-md-3'>第二列</div>
  </div>
  </div>
  需要知道在列里面嵌套的行也是按照栅格系统分成12列的,只是每一列与外面的列宽度不一样,这是因为栅格系统每一列的宽度是根据百分比来指定的.