bootstrap基础样式学习（二）——栅格

 (1)最外层必须使用容器

    div.container或 div.container-fluid

  (2)容器可以放置任何内容,若想使用栅格系统必须用 div.row

    div.container > div.row

  (3)一个.row中不能放置其它的内容，只能放置.col,列中放置任何内容.

    div.container > div.row > div.col

  (4)Bootstrap中行的默认均分12等分,每个列必面指定在行内占比.

  12=[6-6]=[4-4-4]

  (5)栅格系统针对不同的屏幕提供不同列

  .col-lg-1/2/3...12

  .col-md-1/2/3..12

.col-sm-1/2/3..12

  .col-xs-1/2/3..12

  (6)可以使用“列偏移”实现指定列及其后的列向右偏移的效果

  .col-lg-offset-1/2/3/...12

  .col-md-offset-1/2/3/...12

  .col-sm-offset-1/2/3/...12

  .col-xs-offset-1/2/3/...12

  (7)需要注意不同屏幕下列的适用性

    .col-xs-*   适用xs/sm/md/lg 屏幕

    .col-sm-*  适用 sm/md/lg 屏幕

    .col-md-*  适用 md/lg屏幕

    .col-lg-*   适用 lg屏幕

   列宽对于当前屏幕己更大屏幕都有效，列偏一样

  (8)一个列可以指定在不同屏幕下宽度占比

   div.col-xs-12/col-sm-9/col-md-6

   div.col-xs-12/col-md-6

   坑:div.col-xs-6 冲突 div.col-sm-6 错，不能写相同站列

  (9)一列可以指定在特定屏幕下隐藏

    .hidden-xs    仅在xs屏幕下隐藏

    .hidden-sm   仅在sm屏幕下隐藏

    .hidden-md   仅在md屏幕下隐藏

    .hidden-lg    仅在lg屏幕下隐藏

  (10)栅格系统可以嵌套,规则:在 列中再嵌入行，行中再有列

   .container >

      .row >

         .col-*-* >

             .row >

                .col-*-*>