栅格系统的应用

1，栅格系统介绍

• Bootstrap提供了一套响应式，移动设备优先的流式的栅格系统
• 把一个盒子或整个网页分成了12列
• 由一行和多列组成
• 栅格系统通过行列的形式来创建网页布局，把具体数据放入列种
• 栅格系统必须在.container和.container-fluid之中

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>

3，列偏移

指一个栏向右偏移多少个列

.col-md-offset-n

N代表向右偏移的列数

4，列嵌套

<div class="row">

<div class="col-md-4">~~~~~

<div class="row">

<div class="col-md-4">￥%￥%</div>

<div class="col-md-4">…………&</div>

<div class="col-md-4">$$##@</div>

</div>

</div>

</div>

<div class="col-md-4">!!!!!!!</div>

<div class="col-md-4">￥￥￥￥￥</div>

</div>

红色表示基层的栏，分为3栏4列

黑色表示在第一栏中嵌套列3栏4列