bootstrap -- 学习之流动布局

Grid是什么？

Grid 翻译成中文是格栅系统，不过还是不好理解，理解为一行12个格子可能更容易些。Grid可以把一行内容最多分成12个格子，而且可以根据需要来合并这12个格子中的其中某些格子。下面是一个示意图。这样做有什么好处呢？最大的好处就是方便排版。

举个例子，我现在要在每一行设置三个元素，我想让这三个元素在页面中占据相同的宽度，也就是把页面三等分，那么，我们就可以用 Grid 系统来处理，三个元素都设置为 span 4即可以。

Grid 的基础用法：

四个层级：

Grid系统有四个层级，分别如下，设计的初衷是针对不同的屏幕大小，可以分类显示。

• xs (for phones)
• sm (for tablets)
• md (for desktops)
• lg (for larger desktops)

Tip: Each class scales up, so if you wish to set the same widths for xs and sm, you only need to specify xs.

使用规则：

• .row 必须在.container(固定宽度fixed-width) 或者 .container-fluid(全屏full-width) 包裹的内容中使用。（结合下方代码示例理解）
• 而且 元素应该放在columns中，而 columns(ie:col-sm-4) 应该直接是.row直接的子集。（结合下方代码示例理解）
• columns 的总数不能超过12个，否则会显示错乱。
• 除了 xs 之外，其他的三个层级，到某个固定的屏幕宽度节点，多会自动换行，这个需要注意，当然这样也能提升移动设备上的可阅读性。
• 请注意，如果只设置了比较小的层级的的参数的话，自动套用到上一级别的属性，比如设置了 xs 的 column的，在 sm、md 和 lg 都没有设置的情况下，会自动套用 xs 的分栏 。如果sm、md 和 lg 另行单独设置了，会按照设置的参数来显示。

示例代码：

<div class="container"> # 需要在 container 或 container-fluid 下使用

  <div class="row">     #用 row 来定义一行

    <div class="col-*-*"></div>  #col-*-*需要直接紧跟在 row 下方。
  </div>
  <div class="row">     #用 row 来定义另外一行

    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    ...
  </div>
</div>

So, to create the layout you want, create a container (). Next, create a row (). Then, add the desired number of columns (tags with appropriate .col-*-* classes). Note that numbers in .col-*-* should always add up to 12 for each row.

Grid 的微进阶用法：

1.同一个元素可以设定多个层级

比如下面这行代码，如果是在小屏幕下，就是 3/9 比例分栏显示；如果是在中等屏幕下，就是 6/6 比例分栏显示；如果是在大屏幕下，就是 4/8 比例分栏显示。

这时候你要问了，col-xs-*没设置，如果缩小到一定程度，会怎么显示，答案是缩小到 xs 的宽度后，每个元素都是占 1 整行。这样做的好处就是可以针对不同的屏幕显示最优的效果。

同理，如果只设定了col-lg-*，那么当屏幕缩小到中屏幕宽度及以下的时候，都是每个元素占1整行。

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>

请看下面三张图：

• 大屏幕 4/8 比例分栏

• 中屏幕 6/6 比例分栏

• 小屏幕 3/9 比例分栏

• 最小屏幕，1个元素1行：

2.row 内部还可以嵌套row（Nestable）

下面的例子是整个屏幕分2栏，而且第1栏下面还分了2个子栏。注意在栏目下的子栏里面也是12等分的。所以，第二个row里面的两等分用是2个col-sm-6。

<div class="row">
  <div class="col-sm-8">
    .col-sm-8
    <div class="row">
      <div class="col-sm-6">.col-sm-6</div>
      <div class="col-sm-6">.col-sm-6</div>
    </div>
  </div>
  <div class="col-sm-4">.col-sm-4</div>
</div>

在对应屏幕的显示效果如下：

如果屏幕宽度小于 sm 对应的宽度，则会显示成这样：先显示第1栏，再显示第1栏下面的子栏，最后再显示第2栏。

我们再来尝试改下代码，把子栏都改为col-xs-6，这时候屏幕宽度小于 sm 对应宽度会显示如下图。

总结下，嵌套 row这个方法要慎重使用，因为需要思考几层才能知道最终的显示结果。

3、当元素高度不一致的时候，防止发生不期望的换行（Clear Floats）

方法：添加.clearfix这个属性。请参考下面的代码导致的不同变化:

<div class="row">
  <div class="col-xs-6 col-sm-3">
    Column 1
    <br>
    Resize the browser window to see the effect.
  </div>
  <div class="col-xs-6 col-sm-3">Column 2</div>
  <!-- Add clearfix for only the required viewport -->
      <div class="clearfix visible-xs"></div>  #这里增加了 clearfix 来确保Column 3和Column 4的正确换行。

  <div class="col-xs-6 col-sm-3">Column 3</div>
  <div class="col-xs-6 col-sm-3">Column 4</div>
</div>

显示效果如下：

sm 尺寸下，分成4栏：

xs 尺寸下，分成2栏，加了 clearfix 这个属性后，Column 3和Column 4都在Column 1的下方重新起一行，这是我们一般预期达到的效果。

假如我们不添加clearfix这个属性，xs 尺寸下会出现这样的情况，也就是说Column 3和Column 4看到Column 1后面还有空间，就直接缩到那里了。这一般不是我们期望的方式，所以要注意。注意，这些都是因为元素的高度不一致，如果元素高度一致，那么就不需要这样的设定了。

4.缩进

.col-*-offset-* 的作用相当于缩进。就是往后退几格的意思。我们来看个例子：

  <div class="row" style="">
    <div class="col-sm-5 " style="">.col-sm-5</div>
    <div class="col-sm-5 col-sm-offset-2 " style="">.col-sm-5 .col-sm-offset-2 </div>
  </div>

在 sm 宽度及以上的时候，由于设置了第2栏往后缩进2格，所以会显示如下：2栏分别占5格，栏目之间的空白为2格。

sm 宽度以下的时候，会显示成这样，也就是说退格不起作用了。

5.push and pull 可以重新调整元素的位置(Change Column Ordering)

这个详见后面的参考资料，目前还有点晕，暂时留个尾巴在这。