ionic .item : 嵌入图标列表成员的内容中插入图标,比单纯的文字更加生动: 要插入图标,需要满足两个条件:
<!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="bar bar-header bar-positive"> <button class="button icon ion-ios-arrow-left">返回</button> <h1 class="title">酒店搜索</h1> <button class="button">首页</button> </div> <div class="scroll-content has-header"> <div class="list list-inset"> <div class="item item-icon-left item-icon-right"> <i class="icon ion-location"></i> <h2>入住城市:当前位置</h2> <i class="icon ion-ios-arrow-right"></i> </div> <div class="item item-icon-left item-icon-right"> <i class="icon ion-calendar"></i> <h2>入住日期:7月27日 星期五</h2> <i class="icon ion-ios-arrow-right"></i> </div> <div class="item item-icon-left item-icon-right"> <i class="icon ion-social-yen"></i> <h2>价格范围:不限价格</h2> <i class="icon ion-ios-arrow-right"></i> </div> </div> <div class="padding"> <button class="button button-block button-assertive">搜索</button> </div> </div> </body> </html> |
Archiver|手机版|小黑屋| PhoneGap中文网 ( 京ICP备13027796号-1 )
GMT+8, 2024-4-19 12:56 , Processed in 0.025249 second(s), 20 queries .
Powered by Discuz! X3.2
© 2001-2013 Comsenz Inc.