slicy 栅格系统

• 栅格系统
• 填补空缺
• 多重嵌套
• 百分比栅格
• 显示与隐藏

栅格系统可以相应4种分辨率，1200，980，768，<768（980，和960之间选择了980）

栅格系统

默认12列的单元格栅格系统

栅格系统的基本写法

先写一行class="row",行的里面写列（即格子系统）class="gird" 1~12的英文单词被作为了栅格系统的12列格子的命名。

<div class="row">
  <div class="col5 ">
    <!--内容-->
  </div>
  <div class="col4 ">
    <!--内容-->
  </div>
</div>

演示

填补空缺（移位）

可以通过 .fill*的写法让 col12列栅格系统列发生偏移，例如 .fill1将会让列往右偏移1个格子的宽度。

<div class="row">
  <div class="col4 fill1">
    <!--内容-->
  </div>
  <div class="col4 ">
    <!--内容-->
  </div>
</div>

演示

多重嵌套

实现栅格系统的多重嵌套 嵌套依然先写一行class="row"

<div class="row">
  <div class="col6 ">
    <div class="row">
      <div class="col3">
        <!--内容--> 
      </div>
      <div class="col3">
        <!--内容--> 
      </div>
    </div>
  </div>
  <div class="col3 ">
    <!--内容--> 
  </div>
</div>
  

演示

完整的栅格系统演示

百分比栅格（流式布局）

100%百分比格子系统，应使用者要求，新增了百分比的栅格系统，此演示仅为抛石引玉，百分比栅格系统经过测试在实际应用中还有很多问题需要解决，我们期待与使用者一同探讨解决！项目使用需谨慎！ .row-flow

<div class="row row-flow">
  <!--内容-->
</div>

显示与隐藏

设置了显示与隐藏类，可以用于在不设置元素在不同设备下的显示与隐藏