微信小程序開發

小程序不是APP勝似APP
輕量級應用,海量級引流,適應眾多場景,開創移動營銷新格局。
各行業,多場景小程序解決方案,無縫打通線上線下,個性化定制,提前布局微信新生態,搶占第一波紅利

柵格系統可以相應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
新疆25选7开奖规则 彩票注册送38福彩 闲来贵州麻将苹果版本 上海快3历史遗漏 湖北30选5历史开奖结果 game981游戏中心 腾讯棋牌官方下载 全民欢乐捕鱼1期 吉林11选5推荐号下午 湖北快3开奖查询 博彩网老k 欢斗地主真钱版下载 山东麻将各有多少 贵州麻将下载 二十一点一对a分牌吗 新疆11选五5开奖 湖北快3下期购彩