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

栅格系统的基本写法

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

<div class="row">
<div class="col5 "> ... </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>d

 

 

 

完整的栅格系统演示

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

百分比栅格

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

<div class="percent">
<div class="row"> ... </div> </div>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

显示与隐藏

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

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