slicy 柵格系統(tǒng)

• 柵格系統(tǒng)
• 填補空缺
• 多重嵌套
• 百分比柵格
• 顯示與隱藏

柵格系統(tǒng)可以相應4種分辨率，1200，980，768，<768（980，和960之間選擇了980）

柵格系統(tǒng)

默認12列的單元格柵格系統(tǒng)

柵格系統(tǒng)的基本寫法

先寫一行class="row",行的里面寫列（即格子系統(tǒng)）class="gird" 1~12的英文單詞被作為了柵格系統(tǒng)的12列格子的命名。

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

演示

填補空缺（移位）

可以通過 .fill*的寫法讓 col12列柵格系統(tǒng)列發(fā)生偏移，例如 .fill1將會讓列往右偏移1個格子的寬度。

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

演示

多重嵌套

實現(xiàn)柵格系統(tǒng)的多重嵌套 嵌套依然先寫一行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>
  

演示

完整的柵格系統(tǒng)演示

百分比柵格（流式布局）

100%百分比格子系統(tǒng)，應使用者要求，新增了百分比的柵格系統(tǒng)，此演示僅為拋石引玉，百分比柵格系統(tǒng)經(jīng)過測試在實際應用中還有很多問題需要解決，我們期待與使用者一同探討解決！項目使用需謹慎！ .row-flow

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

顯示與隱藏

設置了顯示與隱藏類，可以用于在不設置元素在不同設備下的顯示與隱藏