slicy 栅格系统

2018-06-14 14:50 更新

基于12列栅格化格子系统 ,4种分辨率响应

为您灵活的打造网页的排版结构体系。

栅格系统可以相应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>

演示

fill1

fill2

fill3

fill4

fill5

fill6

fill7

fill8

多重嵌套

实现栅格系统的多重嵌套 嵌套依然先写一行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>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

显示与隐藏

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

show-pc, show-pad, show-phone, hide-pc,hide-pad, hide-phone


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号