.col-{width-percent} : metro风格windows phone的metro风格在信息展示方面有很大的优势，虽然携程的APP 没有突出这一点:-( ：
通过定制栅格的列宽，我们可以简单地实现类似的界面。 思考一下，这个UI能够使用ionic的栅格实现吗？  <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height"> <link rel="stylesheet" type="text/css" href="ionic.min.css"> </head> <body> <div class="scroll-content"> <div class="row"> <div class="col col-50 positive-bg light"> <div>机票</div> <i class="icon ion-plane"></i> </div> <div class="col col-25 assertive-bg light"> <div>火车票</div> <i class="icon ion-android-train"></i> </div> <div class="col col-25 calm-bg light"> <div>用车</div> <i class="icon ion-model-s"></i> </div> </div> <div class="row"> <div class="col calm-bg light"> <div>酒店</div> <i class="icon ion-home"></i> </div> <div class="col stable-bg energized" > <i class="icon ion-person"></i> <div>我的携程</div> </div> </div> <div class="row"> <div class="col balanced-bg light"> <div>旅游</div> <i class="icon ion-image"></i> </div> <div class="col energized-bg light"> <div>景点门票</div> <i class="icon ion-pricetag"></i> </div> <div class="col royal-bg light"> <div>攻略社区</div> <i class="icon ion-person-stalker"></i> </div> </div> </div> </body> </html> |
/1 
Archiver|手机版|小黑屋|
PhoneGap中文网
( 京ICP备13027796号-1 )
GMT+8, 2024-4-26 07:08 , Processed in 0.026106 second(s), 22 queries .
Powered by Discuz! X3.2
© 2001-2013 Comsenz Inc.
