按钮 btn

普通小按钮

Example Copy


<div class="ui-btn-wrap">
    <button class="ui-btn-s">
        确定
    </button>
    <button class="ui-btn-s active">
        确定
    </button>
    <button class="ui-btn-s disabled">
        取消
    </button>
    <button class="ui-btn-s" disabled>
        取消
    </button>
</div>

普通按钮

Example Copy

 
<div class="ui-btn-wrap">
    <button class="ui-btn">
        确定
    </button>
    <button class="ui-btn active">
        确定
    </button>
    <button class="ui-btn" disabled>
        取消
    </button>
</div>

带进度的按钮

Example Copy

 
<div class="ui-btn-wrap">
    <button class="ui-btn ui-btn-progress">确定</button>
    <button class="ui-btn ui-btn-progress">
        <span>50%</span>
        <span class="ui-btn-inner" style="width:50%"><span>50%</span></span>
    </button>
    <button class="ui-btn ui-btn-progress" disabled>取消</button>
</div>

蓝色按钮

Example Copy

 
<div class="ui-btn-wrap">
    <button class="ui-btn ui-btn-primary">
        确定
    </button>
    <button class="ui-btn ui-btn-primary active">
        确定
    </button>
    <button class="ui-btn ui-btn-primary" disabled>
        取消
    </button>
</div>

红色按钮

Example Copy

 
<div class="ui-btn-wrap">
    <button class="ui-btn ui-btn-danger">
        确定
    </button>
    <button class="ui-btn ui-btn-danger active">
        确定
    </button>
    <button class="ui-btn ui-btn-danger" disabled>
        取消
    </button>
</div>

普通大按钮

Example Copy

 
<div class="ui-btn-wrap">
    <button class="ui-btn-lg">
        确定
    </button>
</div>
<div class="ui-btn-wrap">
    <button class="ui-btn-lg active">
        确定
    </button>
</div>
<div class="ui-btn-wrap">
    <button class="ui-btn-lg disabled">
        取消
    </button>
</div>

蓝色大按钮

Example Copy

 
<div class="ui-btn-wrap">
    <button class="ui-btn-lg ui-btn-primary">
        确定
    </button>
</div>
<div class="ui-btn-wrap">
    <button class="ui-btn-lg ui-btn-primary active">
        确定
    </button>
</div>
<div class="ui-btn-wrap">
    <button class="ui-btn-lg ui-btn-primary" disabled>
        取消
    </button>
</div>

红色大按钮

Example Copy

 
<div class="ui-btn-wrap">
    <button class="ui-btn-lg ui-btn-danger">
        确定
    </button>
</div>
<div class="ui-btn-wrap">
    <button class="ui-btn-lg ui-btn-danger active">
        确定
    </button>
</div>
<div class="ui-btn-wrap">
    <button class="ui-btn-lg ui-btn-danger" disabled>
        取消
    </button>
</div>

普通按钮组

Example Copy

  
<div class="ui-btn-group">
    <button class="ui-btn-lg">
        拒绝
    </button>
    <button class="ui-btn-lg">
        拒绝
    </button>
    <button class="ui-btn-lg ui-btn-primary">
        同意
    </button>
</div>

底部按钮组

Example Copy

       
<div class="ui-footer ui-footer-stable ui-btn-group ui-border-t">
    <button class="ui-btn-lg">
        拒绝
    </button>
    <button class="ui-btn-lg">
        拒绝
    </button>
    <button class="ui-btn-lg ui-btn-primary">
        同意
    </button>
</div>

面板 panel

默认面板

Example Copy

猜你喜欢1328条

长书名长书名长书名长书名长书名长书名长书名

小仙
长书名长书名长书名长书名长书名长书名长书名

小仙
长书名长书名长书名长书名长书名长书名长书名

小仙


<section class="ui-panel">
    <h2 class="ui-arrowlink">猜你喜欢<span class="ui-panel-subtitle">1328条</span></h2>
    <ul class="ui-grid-trisect">
        <li>
            <div class="ui-border">
                <div class="ui-grid-trisect-img">
                    <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
                </div>
                <div>
                    <h4 class="ui-nowrap-multi">长书名长书名长书名长书名长书名长书名长书名</h4>
                    <h5 class="ui-nowrap">小仙</h5>
                </div>
            </div>
        </li>
        <li>
            <div class="ui-border">
                <div class="ui-grid-trisect-img">
                    <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
                </div>
                <div>
                    <h4 class="ui-nowrap-multi">长书名长书名长书名长书名长书名长书名长书名</h4>
                    <h5 class="ui-nowrap">小仙</h5>
                </div>
            </div>
        </li>
        <li>
            <div class="ui-border">
                <div class="ui-grid-trisect-img">
                    <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
                </div>
                <div>
                    <h4 class="ui-nowrap-multi">长书名长书名长书名长书名长书名长书名长书名</h4>
                    <h5 class="ui-nowrap">小仙</h5>
                </div>
            </div>
        </li>
    </ul>
</section>

ui-panel-simple没有下边距

Example Copy

评论1328条更多评论


<section class="ui-panel ui-panel-simple ui-border-tb">
    <h2 class="ui-arrowlink"><span>评论</span><span class="ui-panel-subtitle">1328条</span><span class="ui-panel-title-tips">更多评论</span></h2>
</section>

简单版，标题字体较小

Example Copy

历史搜索：

1.faycheng 2月12日

这本书太赞了，每次看都有不一样的体会和感悟，超级喜欢！期待大结局。
2.faycheng 2月12日

标题标题标题标题标题标题题标题标题标题标题标题标题标题标题标题
3.faycheng 2月12日

标题标题标题标题标题标题题标题标题标题标题标题标题标题标题标题


<section class="ui-panel ui-panel-pure ui-border-t">
    <h3>历史搜索：</h3>
    <ul class="ui-list ui-list-pure ui-border-tb">
        <li class="ui-border-t">
            <h5><span>1.faycheng </span><span class="date"> 2月12日</span></h5>
            <h4>这本书太赞了，每次看都有不一样的体会和感悟，超级喜欢！期待大结局。</h4>
        </li>
        <li class="ui-border-t">
            <h5><span>2.faycheng </span><span class="date"> 2月12日</span></h5>
            <h4>标题标题标题标题标题标题题标题标题标题标题标题标题标题标题标题</h4>
        </li>
        <li class="ui-border-t">
            <h5><span>3.faycheng </span><span class="date"> 2月12日</span></h5>
            <h4>标题标题标题标题标题标题题标题标题标题标题标题标题标题标题标题</h4>
        </li>
    </ul>
</section>

头像 avatar

头像

Example Copy

100*100头像
80*80头像
140*140头像
资料场景
平铺头像


<ul class="ui-list ui-list-pure ui-border-tb">
    <li class="ui-border-t">
        <h4>100*100头像</h4>
        <div class="ui-avatar">
            <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
        </div>
    </li>
    <li class="ui-border-t">
        <h4>80*80头像</h4>
        <div class="ui-avatar-s">
            <span style="background-image:url(http://placeholder.qiniudn.com/80x80)"></span>
        </div>
    </li>
    <li class="ui-border-t">
        <h4>140*140头像</h4>
        <div class="ui-avatar-lg">
            <span style="background-image:url(http://placeholder.qiniudn.com/140x140)"></span>
        </div>
        
    </li>
    <li class="ui-border-t">
        <h4>资料场景</h4>
        <div class="ui-avatar-one"><span style="background-image:url(http://placeholder.qiniudn.com/140x140)"></span></div>
    </li>
    <li class="ui-border-t">
        <h4>平铺头像</h4>
        <span class="ui-avatar-tiled"><span style="background-image:url(http://placeholder.qiniudn.com/60x60)"></span></span>
        <span class="ui-avatar-tiled"><span style="background-image:url(http://placeholder.qiniudn.com/60x60)"></span></span>
        <span class="ui-avatar-tiled"><span style="background-image:url(http://placeholder.qiniudn.com/60x60)"></span></span>
        <span class="ui-avatar-tiled"><span style="background-image:url(http://placeholder.qiniudn.com/60x60)"></span></span>
    </li>
</ul>

红点 reddot

徽标

Example Copy

内容内容


<div class="ui-reddot">内容内容</div>
<div class="ui-reddot-border">内容内容</div>
<div class="ui-reddot-s">内容内容</div>
<div class="ui-center-hor">内容内容<i class="ui-reddot ui-reddot-static"></i></div>

徽标 badge

徽标

Example Copy

345

123

带白边红点

new

数字红点

123


<div class="ui-badge-muted">345</div>
<div class="ui-badge">123</div>
<div class="ui-badge-wrap" style="width: 100px;line-height: 50px;">带白边红点<div class="ui-badge-corner">new</div></div>
<div class="ui-badge-wrap" style="width: 100px;line-height: 50px;">数字红点<div class="ui-badge-cornernum">123</div></div>

标签 label


<div class="ui-label-list">
    <label class="ui-label">金庸</label>
    <label class="ui-label">功夫</label>
    <label class="ui-label">悬疑</label>
    <label class="ui-label">盗墓笔记</label>
    <label class="ui-label">欢乐谷</label>
</div>
<div class="ui-label-list">
    <label class="ui-label-s">金庸</label>
    <label class="ui-label-s">功夫</label>
    <label class="ui-label-s">悬疑</label>
    <label class="ui-label-s">盗墓笔记</label>
    <label class="ui-label-s">欢乐谷</label>
</div>

角标 tag

角标

Example Copy

自定义主题


<ul class="ui-grid-halve">
    <li>
        <div class="ui-grid-halve-img ui-tag-svip">
            <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
        </div>
    </li>
    <li>
        <div class="ui-grid-halve-img ui-tag-vip">
            <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
        </div>
    </li>
    <li>
        <div class="ui-grid-halve-img ui-tag-free">
            <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
        </div>

    </li>
    <li>
        <div class="ui-grid-halve-img ui-tag-freelimit">
            <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
        </div>
    </li>
    <li>
        <div class="ui-grid-halve-img ui-tag-last">
            <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
        </div>

    </li>
    <li>
        <div class="ui-grid-halve-img ui-tag-limit">
            <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
        </div>
    </li>
    <li>
        <div class="ui-grid-halve-img ui-tag-act">
            <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
        </div>

    </li>
    <li>
        <div class="ui-grid-halve-img ui-tag-xy">
            <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
        </div>
    </li>
    <li>
        <div class="ui-grid-halve-img">
            <span style="background-image:url(http://placeholder.qiniudn.com/290x160)" class="ui-tag-hot"></span>
        </div>
    </li>
    <li>
        <div class="ui-grid-halve-img">
            <span style="background-image:url(http://placeholder.qiniudn.com/290x160)" class="ui-tag-new"></span>
        </div>
    </li>
    <li>
        <div class="ui-grid-halve-img">
            <span style="background-image:url(http://placeholder.qiniudn.com/290x160)" class="ui-tag-s-hot"></span>
        </div>
    </li>
    <li>
        <div class="ui-grid-halve-img">
            <span style="background-image:url(http://placeholder.qiniudn.com/290x160)" class="ui-tag-s-new"></span>
        </div>
    </li>
    <li>
        <div class="ui-grid-halve-img">
            <span style="background-image:url(http://placeholder.qiniudn.com/290x160)" class="ui-tag-pop-hot"></span>
        </div>
    </li>
    <li>
        <div class="ui-grid-halve-img">
            <span style="background-image:url(http://placeholder.qiniudn.com/290x160)" class="ui-tag-pop-new"></span>
        </div>
    </li>
    <li>
        <div class="ui-grid-halve-img ui-tag-selected">
            <span style="background-image:url(http://placeholder.qiniudn.com/290x160)" class="ui-tag-new"></span>
        </div>
    </li>
    <li>
        <div class="ui-grid-halve-img ui-tag-selected ui-tag-vip">
            <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
        </div>
    </li>
</ul>
<p class="ui-tag-wrap">自定义主题<i class="ui-tag-vip"></i></p>

搜索框 searchbar

搜索框

Example Copy

搜索号码（2-10位）


<div class="ui-searchbar-wrap ui-border-b">
    <div class="ui-searchbar ui-border-radius">
        <i class="ui-icon-search"></i>
        <div class="ui-searchbar-text">搜索号码（2-10位）</div>
        <div class="ui-searchbar-input"><input value="" type="tel" placeholder="搜索号码（2-10位）" autocapitalize="off"></div>
        <i class="ui-icon-close"></i>
    </div>
    <button class="ui-searchbar-cancel">取消</button>
</div>
<!-- <script src="http://i.gtimg.cn/vipstyle/frozenjs/1.0.1/frozen.js?_bid=304"></script> -->
<script src="js/frozen.js"></script>
<script type="text/javascript">
    $('.ui-searchbar').tap(function(){
        $('.ui-searchbar-wrap').addClass('focus');
        $('.ui-searchbar-input input').focus();
    });
    $('.ui-searchbar-cancel').tap(function(){
        $('.ui-searchbar-wrap').removeClass('focus');
    });
</script>

列表 list

简单列表

Example Copy

1.faycheng 2月12日

这本书太赞了，每次看都有不一样的体会和感悟，超级喜欢！期待大结局。
2.faycheng 2月12日

标题标题标题标题标题标题题标题标题标题标题标题标题标题标题标题
3.faycheng 2月12日

标题标题标题标题标题标题题标题标题标题标题标题标题标题标题标题


<ul class="ui-list ui-list-pure ui-border-tb">
    <li class="ui-border-t">
        <p><span>1.faycheng </span><span class="date"> 2月12日</span></p>
        <h4>这本书太赞了，每次看都有不一样的体会和感悟，超级喜欢！期待大结局。</h4>
    </li>
    <li class="ui-border-t">
        <p><span>2.faycheng </span><span class="date"> 2月12日</span></p>
        <h4>标题标题标题标题标题标题题标题标题标题标题标题标题标题标题标题</h4>
    </li>
    <li class="ui-border-t">
        <p><span>3.faycheng </span><span class="date"> 2月12日</span></p>
        <h4>标题标题标题标题标题标题题标题标题标题标题标题标题标题标题标题</h4>
    </li>
</ul>

右边有内容的列表

Example Copy

这是标题，加ui-nowrap可以超出长度截断

new
这是标题，加ui-nowrap可以超出长度截断

new
这是标题，加ui-nowrap可以超出长度截断

123
这是标题，加ui-nowrap可以超出长度截断
标题标题标题标题标题标题标

使用中
标题标题标题标题标题标题标


    <ul class="ui-list ui-list-text ui-border-tb">
    <li class="ui-border-t">
        <div class="ui-list-info">
            <h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
        </div>
        <div class="ui-badge">new</div>
    </li>
    <li class="ui-border-t">
        <div class="ui-list-info">
            <h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
        </div>
        <div class="ui-badge-muted">new</div>
    </li>
    <li class="ui-border-t">
        <div class="ui-list-info">
            <h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
        </div>
        <div class="ui-badge-num">123</div>
    </li>
    <li class="ui-border-t">
        <div class="ui-list-info">
            <h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
        </div>
        <div class="ui-reddot ui-reddot-static"></div>
    </li>
    <li class="ui-border-t">
        <div class="ui-list-info">
            <h4>标题标题标题标题标题标题标</h4>
        </div>
        <div class="ui-list-action">使用中</div>
    </li>
    <li class="ui-border-t">
        <div class="ui-list-info">
            <h4>标题标题标题标题标题标题标</h4>
        </div>
        <label class="ui-switch">
            <input type="checkbox">
        </label>
    </li>
    
</ul>

文字列表

Example Copy

长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字

男
生日

1988年8月8日


<ul class="ui-list ui-list-text ui-list-link ui-border-tb">
    <li class="ui-border-t">
        <h4>长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字</h4>
        <div class="ui-txt-info">男</div>
    </li>
    <li class="ui-border-t">
        <h4 class="ui-nowrap">生日</h4>
        <div class="ui-txt-info">1988年8月8日</div>
    </li>
</ul>

图文一行列表

Example Copy

性别

男
生日

性别

男
生日


<ul class="ui-list ui-list-one ui-list-link ui-border-tb">
    <li class="ui-border-t">
        <div class="ui-list-thumb">
            <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
        </div>
        <div class="ui-list-info">
            <h4 class="ui-nowrap">性别</h4>
            <div class="ui-txt-info">男</div>
        </div>
    </li>
    <li class="ui-border-t">
        <div class="ui-list-thumb">
            <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
        </div>
        <div class="ui-list-info">
            <h4 class="ui-nowrap">生日</h4>
            <div class="ui-reddot ui-reddot-static"></div>
        </div>
    </li>
</ul>
<ul class="ui-list ui-list-one ui-list-link ui-border-tb">
    <li>
        <div class="ui-list-thumb">
            <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
        </div>
        <div class="ui-list-info ui-border-t">
            <h4 class="ui-nowrap">性别</h4>
            <div class="ui-txt-info">男</div>
        </div>
    </li>
    <li>
        <div class="ui-list-thumb">
            <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
        </div>
        <div class="ui-list-info ui-border-t">
            <h4 class="ui-nowrap">生日</h4>
            <div class="ui-reddot ui-reddot-static"></div>
        </div>
    </li>
</ul>

图文列表，active不再默认加上，用js加

Example Copy

ui-list-thumb缩略图
ui-list-thumb-s缩略小图
ui-list-icon icon图
ui-list-icon icon图


<ul class="ui-list ui-list-link ui-border-tb">
    <li class="ui-border-t active">
        <div class="ui-list-thumb">
            <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
        </div>
        <div class="ui-list-info">
            <h4 class="ui-nowrap">ui-list-thumb缩略图</h4>
        </div>
    </li>
    <li class="ui-border-t">
        <div class="ui-list-thumb-s">
            <span style="background-image:url(http://placeholder.qiniudn.com/56x56)"></span>
        </div>
        <div class="ui-list-info">
            <h4 class="ui-nowrap">ui-list-thumb-s缩略小图</h4>
        </div>
    </li>
    <li class="ui-border-t">
        <div class="ui-list-icon">
            <span style="background-image:url(http://placeholder.qiniudn.com/80x80)"></span>
        </div>
        <div class="ui-list-info">
            <h4 class="ui-nowrap">ui-list-icon icon图</h4>
        </div>
    </li>
    <li class="ui-border-t">
        <div class="ui-list-icon">
            <span style="background-image:url(http://placeholder.qiniudn.com/80x80)"></span>
        </div>
        <div class="ui-list-info">
            <h4 class="ui-nowrap">ui-list-icon icon图</h4>
        </div>
    </li>
</ul>

通栏和默认带active列表

Example Copy

加ui-list-active会带按压态
加ui-list-cover通栏


<ul class="ui-list ui-list-text ui-list-active ui-list-cover ui-border-tb">
    <li class="ui-border-t">
        <p>加ui-list-active会带按压态</p>
    </li>
    <li class="ui-border-t">
        <p>加ui-list-cover通栏</p>
    </li>
</ul>

图文列表带头像

Example Copy

这是标题，加ui-nowrap可以超出长度截断

这是内容，加ui-nowrap可以超出长度截断
这是标题，加ui-nowrap可以超出长度截断

这是内容，加ui-nowrap可以超出长度截断


<ul class="ui-list ui-border-tb">
    <li class="ui-border-t">
        <div class="ui-avatar">
            <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
        </div>
        <div class="ui-list-info">
            <h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
            <p class="ui-nowrap">这是内容，加ui-nowrap可以超出长度截断</p>
        </div>
    </li>
    <li class="ui-border-t">
        <div class="ui-avatar">
            <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
        </div>
        <div class="ui-list-info">
            <h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
            <p class="ui-nowrap">这是内容，加ui-nowrap可以超出长度截断</p>
        </div>
    </li>
</ul>

图文列表带头像

Example Copy

这是标题，加ui-nowrap可以超出长度截断
这是标题，加ui-nowrap可以超出长度截断

这是内容，加ui-nowrap可以超出长度截断


<ul class="ui-list ui-list-link ui-border-tb">
    <li>
        <div class="ui-avatar">
            <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
        </div>
        <div class="ui-list-info ui-border-t">
            <h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
        </div>
    </li>
    <li>
        <div class="ui-avatar">
            <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
        </div>
        <div class="ui-list-info ui-border-t">
            <h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
            <p class="ui-nowrap">这是内容，加ui-nowrap可以超出长度截断</p>
        </div>
    </li>
</ul>

图文列表带小头像

Example Copy

这是标题，加ui-nowrap可以超出长度截断

PK
这是标题，加ui-nowrap可以超出长度截断

PK


<ul class="ui-list ui-list-function ui-list-link ui-border-tb">
    <li class="ui-border-t">
        <div class="ui-avatar-s">
            <span style="background-image:url(http://placeholder.qiniudn.com/80x80)"></span>
        </div>
        <div class="ui-list-info">
            <h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
        </div>
        <div class="ui-btn">PK</div>
    </li>
    <li class="ui-border-t">
        <div class="ui-avatar-s">
            <span style="background-image:url(http://placeholder.qiniudn.com/80x80)"></span>
        </div>
        <div class="ui-list-info">
            <h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
        </div>
        <div class="ui-btn">PK</div>
    </li>
</ul>

图文列表

Example Copy

这是标题，加ui-nowrap可以超出长度截断

这是内容，加ui-nowrap可以超出长度截断
标题标题标题标题标题标题标题标题标题标题标题

加载中


<ul class="ui-list ui-list-link ui-border-tb">
    <li class="ui-border-t">
        <div class="ui-list-img">
            <span style="background-image:url(http://placeholder.qiniudn.com/200x136)"></span>
        </div>
        <div class="ui-list-info">
            <h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
            <p class="ui-nowrap">这是内容，加ui-nowrap可以超出长度截断</p>
        </div>
    </li>
    <li class="ui-border-t">
        <div class="ui-list-img">
            <span style="background-image:url(http://placeholder.qiniudn.com/200x136)"></span>
        </div>
        <div class="ui-list-info">
            <h4>标题标题标题标题标题标题标题标题标题标题标题</h4>
        </div>
    </li>
</ul>
<div class="ui-loading-wrap">
    <p>加载中</p>
    <i class="ui-loading"></i>
</div>

表单 form

命令表单项

Example Copy


<div class="ui-form ui-border-t">
    <form action="#">
        <div class="ui-form-item ui-form-item-order ui-border-b">
            <a href="#">清空消息列表</a>
        </div>
        <div class="ui-form-item ui-form-item-order ui-border-b">
            <a href="#">清空所有聊天记录</a>
        </div>
        <div class="ui-form-item ui-form-item-order ui-border-b">
            <a href="#">清空缓存数据</a>
        </div>
    </form>
</div>

表单展示项

Example Copy


<div class="ui-form ui-border-t">
    <form action="#">
        <div class="ui-form-item ui-form-item-show ui-form-item-link ui-border-b">
            <label for="#">账号</label>
            <input type="text" value="421205351" readonly>
        </div>
        <div class="ui-form-item ui-form-item-show ui-border-b">
            <label for="#">身份证号码</label>
            <input type="text" value="445331199401055317">
        </div>
    </form>
</div>

链接表单项

Example Copy


<div class="ui-form ui-border-t">
    <form action="#">
        <div class="ui-form-item ui-form-item-link ui-border-b">
            <a href="#">展示链接</a>
        </div>
        <div class="ui-form-item ui-form-item-link ui-border-b">
            <a href="#">展示链接</a>
        </div>
        <div class="ui-form-item ui-form-item-link ui-border-b">
            <a href="#">展示链接</a>
        </div>
    </form>
</div>

表单输入项

Example Copy


<div class="ui-form ui-border-t">
    <form action="#">
        <div class="ui-form-item ui-border-b">
            <label>
                身份证号码
            </label>
            <input type="text" placeholder="18位身份证号码">
            <a href="#" class="ui-icon-close">
            </a>
        </div>
        <div class="ui-form-item ui-form-item-textarea ui-border-b">
            <label>
                详细地址
            </label>
            <textarea placeholder="街道等详细地址"></textarea>
        </div>
        <div class="ui-form-item ui-form-item-l ui-border-b">
            <label class="ui-border-r">
                中国 +86
            </label>
            <input type="text" placeholder="请输入手机号码">
            <a href="#" class="ui-icon-close">
            </a>
        </div>
    </form>
</div>

表单输入项3

Example Copy


<div class="ui-form ui-border-t">
    <form action="#">
        <div class="ui-form-item ui-form-item-pure ui-border-b">
            <input type="text" placeholder="QQ号/手机号/邮箱">
            <a href="#" class="ui-icon-close"></a>
        </div>
        <div class="ui-form-item ui-form-item-pure ui-border-b">
            <input type="password" placeholder="密码">
            <a href="#" class="ui-icon-close"></a>
        </div>
        <div class="ui-form-item ui-form-item-r ui-border-b">
            <input type="text" placeholder="请输入验证码">
            <!-- 若按钮不可点击则添加 disabled 类 -->
            <button type="button" class="ui-border-l">重新发送</button>
            <a href="#" class="ui-icon-close"></a>
        </div>
    </form>
</div>

表单开关项

Example Copy


<div class="ui-form ui-border-t">
    <form action="#">
        <div class="ui-form-item ui-form-item-switch ui-border-b">
            <p>
                对附近的人可见
            </p>
            <label class="ui-switch">
                <input type="checkbox">
            </label>
        </div>
        <div class="ui-form-item ui-form-item-switch ui-border-b">
            <p>
                对附近的人可见
            </p>
            <label class="ui-switch">
                <input type="checkbox" checked>
            </label>
        </div>
    </form>
</div>

表单下拉框

Example Copy

日期


<div class="ui-form ui-border-t">
    <form action="#">
        <div class="ui-form-item ui-border-b">
            <label>日期</label>
            <div class="ui-select-group">
                <div class="ui-select">
                    <select>
                        <option>2014</option>
                        <option selected>2015</option>
                        <option>2016</option>
                    </select>
                </div>
                <div class="ui-select">
                    <select>
                        <option>03</option>
                        <option selected>04</option>
                        <option>05</option>
                    </select>
                </div>
                <div class="ui-select">
                    <select>
                        <option>21</option>
                        <option selected>22</option>
                        <option>23</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="ui-form-item ui-border-b">
            <label>日期</label>
            <div class="ui-select">
                <select>
                    <option>2014</option>
                    <option selected>2015</option>
                    <option>2016</option>
                </select>
            </div>
        </div>
    </form>
</div>

表单单选项

Example Copy


<div class="ui-form ui-border-t">
    <form action="#">
        <div class="ui-form-item ui-form-item-radio ui-border-b">
            
            <label class="ui-radio" for="radio">
                <input type="radio" name="radio">
            </label>
            <p>表单中用于单选操作</p>
        </div>
        <div class="ui-form-item ui-form-item-radio ui-border-b">
            
            <label class="ui-radio" for="radio">
                <input type="radio" checked name="radio">
            </label>
            <p>表单中用于单选操作</p>
        </div>
    </form>
</div>

表单多选项,普通列表中多选项

Example Copy

普通列表ui-list中用于多选操作
普通列表中用于多选操作


<div class="ui-form ui-border-t">
    <form action="#">
        <div class="ui-form-item ui-form-item-checkbox ui-border-b">
            <label class="ui-checkbox">
                <input type="checkbox">
            </label>
            <p>表单中用于多选操作</p>
        </div>
        <div class="ui-form-item ui-form-item-checkbox ui-border-b">
            <label class="ui-checkbox">
                <input type="checkbox" checked>
            </label>
            <p>表单中用于多选操作</p>
        </div>
    </form>
    <ul class="ui-list ui-list-text ui-list-checkbox ui-border-b">
        <li class="ui-border-t">
            <label class="ui-checkbox">
                <input type="checkbox">
            </label>
            <p>普通列表ui-list中用于多选操作</p>
        </li>
        <li class="ui-border-t">
            <label class="ui-checkbox">
                <input type="checkbox" checked>
            </label>
            <p>普通列表中用于多选操作</p>
        </li>
    </ul>
</div>

多选框

Example Copy

我已阅读并同意


<p> 
    <label class="ui-checkbox-s">
        <input type="checkbox" name="checkbox" checked>
    </label>
     我已阅读并同意
</p>
<p>
    <label class="ui-checkbox-s">
        <input type="checkbox" name="checkbox" checked>
    </label>
     我已阅读并同意
</p>

普通列表中单选项

Example Copy

普通列表中用于单选操作
普通列表中用于单选操作


<ul class="ui-list ui-list-text ui-list-radio ui-border-tb">
    <li class="ui-border-t">
        <label class="ui-radio" for="radio">
            <input type="radio" name="radio">
        </label>
        <p>普通列表中用于单选操作</p>
    </li>
    <li class="ui-border-t">
        <label class="ui-radio" for="radio">
            <input type="radio" checked name="radio">
        </label>
        <p>普通列表中用于单选操作</p>
    </li>
</ul>

普通输入框

Example Copy


<section class="ui-input-wrap ui-border-t">
    <div class="ui-input ui-border-radius">
        <input type="text" name="" value="" placeholder="我也说一句...">
    </div>
    <button class="ui-btn">评论</button>
</section>

表格 table

默认

Example Copy

已购买	状态	会员到期时间
2014257777	使用中	2016-02-06
2014257777	待付款	付款
2014257777	待付款	付款


<table class="ui-table ui-border-tb">
    <thead>
    <tr><th>已购买</th><th>状态</th><th>会员到期时间</th></tr>
    </thead>
    <tbody>
    <tr><td>2014257777</td><td>使用中</td><td>2016-02-06</td></tr>
    <tr><td>2014257777</td><td>待付款</td><td><a href="#">付款</a></td></tr>
    <tr><td>2014257777</td><td>待付款</td><td><a href="#">付款</a></td></tr>
    </tbody>
</table>

默认

Example Copy

已购买	状态	会员到期时间
2014257777	使用中	2016-02-06
2014257777	待付款	付款
2014257777	待付款


<table class="ui-table ui-border-tb">
    <thead>
    <tr><th>已购买</th><th>状态</th><th>会员到期时间</th></tr>
    </thead>
    <tbody>
    <tr><td>2014257777</td><td>使用中</td><td>2016-02-06</td></tr>
    <tr><td>2014257777</td><td>待付款</td><td><a href="#">付款</a></td></tr>
    <tr><td>2014257777</td><td class="ui-border-r">待付款</td></tr>
    </tbody>
</table>

全框

Example Copy

已购买	状态	会员到期时间
2014257777	使用中	2016-02-06
2014257777	待付款	付款
2014257777	待付款	付款


<table class="ui-table ui-border">
    <thead>
    <tr><th>已购买</th><th>状态</th><th>会员到期时间</th></tr>
    </thead>
    <tbody>
    <tr><td>2014257777</td><td>使用中</td><td>2016-02-06</td></tr>
    <tr><td>2014257777</td><td>待付款</td><td><a href="#">付款</a></td></tr>
    <tr><td>2014257777</td><td>待付款</td><td><a href="#">付款</a></td></tr>
    </tbody>
</table>

通知 notice

通知

Example Copy

请检查网络


<section class="ui-notice">
    <i></i>
    <p>请检查网络</p>
    <div class="ui-notice-btn">
        <button class="ui-btn-primary ui-btn-lg">按钮</button>
    </div>
</section>

普通提示 tips

普通提示条

Example Copy

提供相关的信息或建议提供相关的信息或建议

警示已经发生或可能在未来发生的问题警示已经发生或可能在未来发生的问题

提示操作成功或流程成功提示


<div class="ui-tips ui-tips-info">
    <i></i><span>提供相关的信息或建议提供相关的信息或建议</span>
</div>
<div class="ui-tips ui-tips-warn">
    <i></i><span>警示已经发生或可能在未来发生的问题警示已经发生或可能在未来发生的问题</span>
</div>
<div class="ui-tips ui-tips-success">
    <i></i><span>提示操作成功或流程成功提示</span>
</div>

工具提示 tooltips

工具提示条

Example Copy

异常状态相关提示异常状态相关提示异常状态相关提示异常状态相关提示

客观情况告知客观情况告知客观情况告知客观情况告知

进行时状态相关进行时状态相关进行时状态相关进行时状态相关

新手引导、新功能推荐、广告推广等。新手引导、新功能推荐、广告推广等。


<div class="ui-tooltips ui-tooltips-warn">
    <div class="ui-tooltips-cnt ui-tooltips-cnt-link ui-border-b">
        <i></i>异常状态相关提示异常状态相关提示异常状态相关提示异常状态相关提示
    </div>
</div>
<div class="ui-tooltips ui-tooltips-warn">
    <div class="ui-tooltips-cnt ui-border-b">
        <i></i>客观情况告知客观情况告知客观情况告知客观情况告知<a class="ui-icon-close"></a>
    </div>
</div>
<div class="ui-tooltips ui-tooltips-guide">
    <div class="ui-tooltips-cnt ui-tooltips-cnt-link ui-border-b">
        <i class="ui-icon-talk"></i>进行时状态相关进行时状态相关进行时状态相关进行时状态相关
    </div>
</div>
<div class="ui-tooltips ui-tooltips-guide">
    <div class="ui-tooltips-cnt ui-border-b">
        <i></i>新手引导、新功能推荐、广告推广等。新手引导、新功能推荐、广告推广等。<a class="ui-icon-close"></a>
    </div>
</div>

新消息提示 newstips

新消息提示

Example Copy

新消息新消息新消息新消息新消息新消息新消息新消息

新消息

123

新消息

123


<div class="ui-newstips-wrap">
    <div class="ui-newstips">
        <span class="ui-avatar-tiled">
            <span style="background-image:url(http://placeholder.qiniudn.com/60x60)"></span>
        </span>
        <div>新消息新消息新消息新消息新消息新消息新消息新消息</div>
        <span class="ui-reddot ui-reddot-static"></span>
    </div>
</div>
<div class="ui-newstips-wrap">
    <div class="ui-newstips">
        <span class="ui-newstips-thumb">
            <span style="background-image:url(http://placeholder.qiniudn.com/60x60)"></span>
        </span>
        <div>新消息</div>
        <span class="ui-badge-num">123</span>
    </div>
</div>
<div class="ui-newstips-wrap">
    <div class="ui-newstips">
        <i></i>
        <div>新消息</div>
        <span class="ui-badge-num">123</span>
    </div>
</div>

浮层提示 poptips

浮层提示条

Example Copy

温馨提示内容


<div class="ui-poptips ui-poptips-success">
    <div class="ui-poptips-cnt"><i></i>温馨提示内容</div>
</div>
<div class="ui-poptips ui-poptips-info">
    <div class="ui-poptips-cnt"><i></i>温馨提示内容</div>
</div>
<div class="ui-poptips ui-poptips-warn">
    <div class="ui-poptips-cnt"><i></i>温馨提示内容</div>
</div>

选择器 selector

好友选择器

Example Copy

选择好友

最近在玩的好友
11
- 飞翔的企鹅
- 飞翔的企鹅
- 飞翔的企鹅
最近在玩的好友
11
- 飞翔的企鹅
- 飞翔的企鹅
最近在玩的好友
11
- 飞翔的企鹅
- 飞翔的企鹅
- 飞翔的企鹅
- 飞翔的企鹅


<section class="ui-selector">
  <header class="ui-border-b">
    <h3>选择好友</h3>
  </header>
  <div class="ui-selector-content" style="display:">
    <ul>
      <li class="ui-selector-item active">
        <h3 class="ui-border-b">
          <p>最近在玩的好友</p><span class="ui-txt-info">11</span>
        </h3>
        <ul class="ui-list ui-border-b">
          <li>
            <div class="ui-avatar-s">
              <span style="background-image:url(../img/ava1.png)"></span>
            </div>
            <div class="ui-list-info ui-border-t"><h4>飞翔的企鹅</h4></div>
          </li>
          <li>
            <div class="ui-avatar-s">
              <span style="background-image:url(../img/ava1.png)"></span>
            </div>
            <div class="ui-list-info ui-border-t"><h4>飞翔的企鹅</h4></div>
          </li>
          <li>
            <div class="ui-avatar-s">
              <span style="background-image:url(../img/ava1.png)"></span>
            </div>
            <div class="ui-list-info ui-border-t"><h4>飞翔的企鹅</h4></div>
          </li>
        </ul>
      </li>
      <li class=" ui-selector-item">
        <h3 class="ui-border-b">
          <p>最近在玩的好友</p><span class="ui-txt-info">11</span>
        </h3>
        <ul class="ui-list ui-border-b">
          <li>
            <div class="ui-avatar-s">
              <span style="background-image:url(../img/ava1.png)"></span>
            </div>
            <div class="ui-list-info ui-border-t"><h4>飞翔的企鹅</h4></div>
          </li>
          <li>
            <div class="ui-avatar-s">
              <span style="background-image:url(../img/ava1.png)"></span>
            </div>
            <div class="ui-list-info ui-border-t"><h4>飞翔的企鹅</h4></div>
          </li>
        </ul>
      </li>
      <li class=" ui-selector-item">
        <h3 class="ui-border-b"><i class="arrow"></i>
          <p>最近在玩的好友</p><span class="ui-txt-info">11</span>
        </h3>
        <ul class="ui-list ui-border-b">
          <li>
            <div class="ui-avatar-s">
              <span style="background-image:url(../img/ava1.png)"></span>
            </div>
            <div class="ui-list-info ui-border-t"><h4>飞翔的企鹅</h4></div>
          </li>
          <li>
            <div class="ui-avatar-s">
              <span style="background-image:url(../img/ava1.png)"></span>
            </div>
            <div class="ui-list-info ui-border-t"><h4>飞翔的企鹅</h4></div>
          </li>
          <li>
            <div class="ui-avatar-s">
              <span style="background-image:url(../img/ava1.png)"></span>
            </div>
            <div class="ui-list-info ui-border-t"><h4>飞翔的企鹅</h4></div>
          </li>
          <li>
            <div class="ui-avatar-s">
              <span style="background-image:url(../img/ava1.png)"></span>
            </div>
            <div class="ui-list-info ui-border-t"><h4>飞翔的企鹅</h4></div>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</section>

进度条 progress

进度条

Example Copy


<div class="ui-progress">
    <span style="width:50%"></span>
</div>

图片上进度条

Example Copy


<ul class="ui-grid-halve">
    <li>
        <div class="ui-grid-halve-img">
            <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
            <div class="ui-progress">
                <span style="width:50%"></span>
            </div>
        </div>

    </li>
    <li>
        <div class="ui-grid-halve-img">
            <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
        </div>
    </li>
</ul>

加载中 loading

局部加载中

Example Copy

正在加载中...


<div class="ui-loading-wrap">
    <p>正在加载中...</p>
    <i class="ui-loading"></i>
</div>

页面加载中

Example Copy

正在加载中...


<div class="ui-loading-block show">
    <div class="ui-loading-cnt">
        <i class="ui-loading-bright"></i>
        <p>正在加载中...</p>
    </div>
</div>
<script type="text/javascript" class="demo-script">
    // var el = $.loading({content:'加载中...'});
    // el.on("loading:hide",function(){
    //     console.log("loading hide");
    // });
</script>

菜单 actionsheet

菜单

Example Copy

同时会将我从对方的列表中删除


<div class="ui-actionsheet">  
	<div class="ui-actionsheet-cnt">
		<h4>同时会将我从对方的列表中删除</h4> 
		<button>分享</button>  
		<button class="ui-actionsheet-del">删除</button>
		<button>取消</button> 
	</div>         
</div>
<script type="text/javascript">
	$('.ui-actionsheet').addClass('show');
</script>

对话框 dialog

对话框

Example Copy

新手任务

标题标题

开通年费QQ会员即可领取欢乐斗地主感恩节回馈礼包！


<div class="ui-dialog">
    <div class="ui-dialog-cnt">
	    <header class="ui-dialog-hd ui-border-b">
                  <h3>新手任务</h3>
                  <i class="ui-dialog-close" data-role="button"></i>
              </header>
        <div class="ui-dialog-bd">
            <h4>标题标题</h4>
            <div>开通年费QQ会员即可领取欢乐斗地主感恩节回馈礼包！</div>
        </div>
        <div class="ui-dialog-ft">
            <button type="button" data-role="button">取消</button>
            <button type="button" data-role="button">开通</button>
        </div>
    </div>        
</div>
<script class="demo-script">
$(".ui-dialog").dialog("show");
</script>

选项卡 tab

标签栏

Example Copy

热门推荐
全部表情
表情

内容1
内容2
内容3

热门推荐
全部表情
表情

内容1
内容2
内容3


<div class="ui-tab" id="tab1">
    <ul class="ui-tab-nav ui-border-b">
        <li class="current">热门推荐</li>
        <li>全部表情</li>
        <li>表情</li>
    </ul>
    <ul class="ui-tab-content" style="width:300%">
        <li>内容1</li>
        <li>内容2</li>
        <li>内容3</li>
    </ul>
</div>
<div class="ui-tab" id="tab2">
    <ul class="ui-tab-nav ui-border-b">
        <li class="current">热门推荐</li>
        <li>全部表情</li>
        <li>表情</li>
    </ul>
    <ul class="ui-tab-content" style="width:300%">
        <li>内容1</li>
        <li>内容2</li>
        <li>内容3</li>
    </ul>
</div>

轮播图 slider

轮播组件

Example Copy

内容


<div class="ui-slider" id="slider1">
    <ul class="ui-slider-content" style="width: 300%">
        <li><span style="background-image:url(http://placeholder.qiniudn.com/640x200)"></span></li>
        <li><span style="background-image:url(http://placeholder.qiniudn.com/640x200)"></span></li>
        <li><span style="background-image:url(http://placeholder.qiniudn.com/640x200)"></span></li>
    </ul>
</div>
内容
<div class="ui-slider" id="slider2">
    <ul class="ui-slider-content" style="width: 300%">
        <li><span style="background-image:url(http://placeholder.qiniudn.com/640x200)"></span></li>
        <li><span style="background-image:url(http://placeholder.qiniudn.com/640x200)"></span></li>
        <li><span style="background-image:url(http://placeholder.qiniudn.com/640x200)"></span></li>
    </ul>
</div>

vip vip

会员栏

Example Copy

QQ会员xxxx


<div class="ui-tooltips-vip">
    <div class="ui-tooltips-cnt">
        <i class="ui-icon-vip"></i>
        <span>QQ会员xxxx</span>
        <button class="ui-btn-vip">开通</button>
    </div>
</div>

qq等级图标

Example Copy


<span class="ui-icon-qqlevel ui-icon-qqlevel-none"></span>
<span class="ui-icon-qqlevel ui-icon-qqlevel-king"></span>
<span class="ui-icon-qqlevel ui-icon-qqlevel-sun"></span>
<span class="ui-icon-qqlevel ui-icon-qqlevel-moon"></span>
<span class="ui-icon-qqlevel ui-icon-qqlevel-star"></span>

鹅头图标

Example Copy


<span class="ui-icon-qq"></span>
<span class="ui-icon-vip"></span>
<span class="ui-icon-svip"></span>
<span class="ui-icon-yearvip"></span>
<span class="ui-icon-yearsvip"></span>

会员等级图标

Example Copy

测试


测试
<span class="ui-icon-viplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/vip.png)"></span>
</span>
<span class="ui-icon-viplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/vip1.png)"></span>
</span>
<span class="ui-icon-viplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/vip2.png)"></span>
</span>
<span class="ui-icon-viplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/vip3.png)"></span>
</span>
<span class="ui-icon-viplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/vip4.png)"></span>
</span>
<span class="ui-icon-viplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/vip5.png)"></span>
</span>
<span class="ui-icon-viplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/vip6.png)"></span>
</span>
<span class="ui-icon-viplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/vip7.png)"></span>
</span>
<span class="ui-icon-viplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/vip7.png)"></span>
</span>
<span class="ui-icon-viplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/vip8.png)"></span>
</span>

会员等级图标铭牌

Example Copy

测试


            测试
<span class="ui-icon-viplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/vip_s.png)"></span>
</span>
<span class="ui-icon-viplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/vip_s1.png)"></span>
</span>
<span class="ui-icon-viplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/vip_s2.png)"></span>
</span>
<span class="ui-icon-viplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/vip_s3.png)"></span>
</span>
<span class="ui-icon-viplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/vip_s4.png)"></span>
</span>
<span class="ui-icon-viplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/vip_s5.png)"></span>
</span>
<span class="ui-icon-viplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/vip_s6.png)"></span>
</span>
<span class="ui-icon-viplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/vip_s7.png)"></span>
</span>
<span class="ui-icon-viplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/vip_s8.png)"></span>
</span>

会员等级图标

Example Copy

测试


            测试
<span class="ui-icon-yearviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/yearvip1.png)"></span>
</span>
<span class="ui-icon-yearviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/yearvip2.png)"></span>
</span>
<span class="ui-icon-yearviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/yearvip3.png)"></span>
</span>
<span class="ui-icon-yearviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/yearvip4.png)"></span>
</span>
<span class="ui-icon-yearviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/yearvip5.png)"></span>
</span>
<span class="ui-icon-yearviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/yearvip6.png)"></span>
</span>
<span class="ui-icon-yearviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/yearvip7.png)"></span>
</span>
<span class="ui-icon-yearviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/yearvip8.png)"></span>
</span>

会员等级图标

Example Copy

测试


            测试
<span class="ui-icon-yearviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/yearvip_s1.png)"></span>
</span>
<span class="ui-icon-yearviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/yearvip_s2.png)"></span>
</span>
<span class="ui-icon-yearviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/yearvip_s3.png)"></span>
</span>
<span class="ui-icon-yearviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/yearvip_s4.png)"></span>
</span>
<span class="ui-icon-yearviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/yearvip_s5.png)"></span>
</span>
<span class="ui-icon-yearviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/yearvip_s6.png)"></span>
</span>
<span class="ui-icon-yearviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/yearvip_s7.png)"></span>
</span>
<span class="ui-icon-yearviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/yearvip_s8.png)"></span>
</span>

会员等级图标

Example Copy

测试


            测试
<span class="ui-icon-sviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/svip.png)"></span>
</span>
<span class="ui-icon-sviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/svip1.png)"></span>
</span>
<span class="ui-icon-sviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/svip2.png)"></span>
</span>
<span class="ui-icon-sviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/svip3.png)"></span>
</span>
<span class="ui-icon-sviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/svip4.png)"></span>
</span>
<span class="ui-icon-sviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/svip5.png)"></span>
</span>
<span class="ui-icon-sviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/svip6.png)"></span>
</span>
<span class="ui-icon-sviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/svip7.png)"></span>
</span>
<span class="ui-icon-sviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/svip8.png)"></span>
</span>

会员等级图标

Example Copy

测试


            测试
<span class="ui-icon-sviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/svip_s.png)"></span>
</span>
<span class="ui-icon-sviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/svip_s1.png)"></span>
</span>
<span class="ui-icon-sviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/svip_s2.png)"></span>
</span>
<span class="ui-icon-sviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/svip_s3.png)"></span>
</span>
<span class="ui-icon-sviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/svip_s4.png)"></span>
</span>
<span class="ui-icon-sviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/svip_s5.png)"></span>
</span>
<span class="ui-icon-sviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/svip_s6.png)"></span>
</span>
<span class="ui-icon-sviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/svip_s7.png)"></span>
</span>
<span class="ui-icon-sviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/svip_s8.png)"></span>
</span>

会员等级图标

Example Copy

测试


            测试
<span class="ui-icon-yearsviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/yearsvip1.png)"></span>
</span>
<span class="ui-icon-yearsviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/yearsvip2.png)"></span>
</span>
<span class="ui-icon-yearsviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/yearsvip3.png)"></span>
</span>
<span class="ui-icon-yearsviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/yearsvip4.png)"></span>
</span>
<span class="ui-icon-yearsviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/yearsvip5.png)"></span>
</span>
<span class="ui-icon-yearsviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/yearsvip6.png)"></span>
</span>
<span class="ui-icon-yearsviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/yearsvip7.png)"></span>
</span>
<span class="ui-icon-yearsviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/yearsvip8.png)"></span>
</span>

会员等级图标

Example Copy

测试


            测试
<span class="ui-icon-yearsviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/yearsvip_s1.png)"></span>
</span>
<span class="ui-icon-yearsviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/yearsvip_s2.png)"></span>
</span>
<span class="ui-icon-yearsviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/yearsvip_s3.png)"></span>
</span>
<span class="ui-icon-yearsviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/yearsvip_s4.png)"></span>
</span>
<span class="ui-icon-yearsviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/yearsvip_s5.png)"></span>
</span>
<span class="ui-icon-yearsviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/yearsvip_s6.png)"></span>
</span>
<span class="ui-icon-yearsviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/yearsvip_s7.png)"></span>
</span>
<span class="ui-icon-yearsviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/yearsvip_s8.png)"></span>
</span>

会员等级图标

Example Copy

测试


            测试
<span class="ui-icon-mq">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/mq_vip.png)"></span>
</span>
<span class="ui-icon-mq">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/mq_yearvip.png)"></span>
</span>

会员等级图标

Example Copy

测试


            测试
<span class="ui-icon-viplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/vip.png)"></span>
</span>
<span class="ui-icon-viplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/vip1.png)"></span>
</span>
<span class="ui-icon-viplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/vip2.png)"></span>
</span>
<span class="ui-icon-viplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/vip3.png)"></span>
</span>
<span class="ui-icon-viplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/vip4.png)"></span>
</span>
<span class="ui-icon-viplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/vip5.png)"></span>
</span>
<span class="ui-icon-viplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/vip6.png)"></span>
</span>
<span class="ui-icon-viplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/vip7.png)"></span>
</span>
<span class="ui-icon-viplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/vip8.png)"></span>
</span>

会员等级图标

Example Copy

测试


            测试
<span class="ui-icon-viplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/vip_s.png)"></span>
</span>
<span class="ui-icon-viplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/vip_s1.png)"></span>
</span>
<span class="ui-icon-viplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/vip_s2.png)"></span>
</span>
<span class="ui-icon-viplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/vip_s3.png)"></span>
</span>
<span class="ui-icon-viplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/vip_s4.png)"></span>
</span>
<span class="ui-icon-viplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/vip_s5.png)"></span>
</span>
<span class="ui-icon-viplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/vip_s6.png)"></span>
</span>
<span class="ui-icon-viplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/vip_s7.png)"></span>
</span>
<span class="ui-icon-viplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/vip_s8.png)"></span>
</span>

会员等级图标

Example Copy

测试


            测试
<span class="ui-icon-yearviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/yearvip1.png)"></span>
</span>
<span class="ui-icon-yearviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/yearvip2.png)"></span>
</span>
<span class="ui-icon-yearviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/yearvip3.png)"></span>
</span>
<span class="ui-icon-yearviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/yearvip4.png)"></span>
</span>
<span class="ui-icon-yearviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/yearvip5.png)"></span>
</span>
<span class="ui-icon-yearviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/yearvip6.png)"></span>
</span>
<span class="ui-icon-yearviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/yearvip7.png)"></span>
</span>
<span class="ui-icon-yearviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/yearvip8.png)"></span>
</span>

会员等级图标

Example Copy

测试


            测试
<span class="ui-icon-yearviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/yearvip_s1.png)"></span>
</span>
<span class="ui-icon-yearviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/yearvip_s2.png)"></span>
</span>
<span class="ui-icon-yearviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/yearvip_s3.png)"></span>
</span>
<span class="ui-icon-yearviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/yearvip_s4.png)"></span>
</span>
<span class="ui-icon-yearviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/yearvip_s5.png)"></span>
</span>
<span class="ui-icon-yearviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/yearvip_s6.png)"></span>
</span>
<span class="ui-icon-yearviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/yearvip_s7.png)"></span>
</span>
<span class="ui-icon-yearviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/yearvip_s8.png)"></span>
</span>

会员等级图标

Example Copy

测试


            测试
<span class="ui-icon-sviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/svip.png)"></span>
</span>
<span class="ui-icon-sviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/svip1.png)"></span>
</span>
<span class="ui-icon-sviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/svip2.png)"></span>
</span>
<span class="ui-icon-sviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/svip3.png)"></span>
</span>
<span class="ui-icon-sviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/svip4.png)"></span>
</span>
<span class="ui-icon-sviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/svip5.png)"></span>
</span>
<span class="ui-icon-sviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/svip6.png)"></span>
</span>
<span class="ui-icon-sviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/svip7.png)"></span>
</span>
<span class="ui-icon-sviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/svip8.png)"></span>
</span>

会员等级图标

Example Copy

测试


            测试
<span class="ui-icon-viplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/svip_s.png)"></span>
</span>
<span class="ui-icon-sviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/svip_s1.png)"></span>
</span>
<span class="ui-icon-sviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/svip_s2.png)"></span>
</span>
<span class="ui-icon-sviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/svip_s3.png)"></span>
</span>
<span class="ui-icon-sviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/svip_s4.png)"></span>
</span>
<span class="ui-icon-sviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/svip_s5.png)"></span>
</span>
<span class="ui-icon-sviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/svip_s6.png)"></span>
</span>
<span class="ui-icon-sviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/svip_s7.png)"></span>
</span>
<span class="ui-icon-sviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/svip_s8.png)"></span>
</span>

会员等级图标

Example Copy

测试


            测试
<span class="ui-icon-yearsviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/yearsvip1.png)"></span>
</span>
<span class="ui-icon-yearsviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/yearsvip2.png)"></span>
</span>
<span class="ui-icon-yearsviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/yearsvip3.png)"></span>
</span>
<span class="ui-icon-yearsviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/yearsvip4.png)"></span>
</span>
<span class="ui-icon-yearsviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/yearsvip5.png)"></span>
</span>
<span class="ui-icon-yearsviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/yearsvip6.png)"></span>
</span>
<span class="ui-icon-yearsviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/yearsvip7.png)"></span>
</span>
<span class="ui-icon-yearsviplevel">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/yearsvip8.png)"></span>
</span>

会员等级图标

Example Copy

测试


            测试
<span class="ui-icon-yearsviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/yearsvip_s1.png)"></span>
</span>
<span class="ui-icon-yearsviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/yearsvip_s2.png)"></span>
</span>
<span class="ui-icon-yearsviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/yearsvip_s3.png)"></span>
</span>
<span class="ui-icon-yearsviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/yearsvip_s4.png)"></span>
</span>
<span class="ui-icon-yearsviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/yearsvip_s5.png)"></span>
</span>
<span class="ui-icon-yearsviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/yearsvip_s6.png)"></span>
</span>
<span class="ui-icon-yearsviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/yearsvip_s7.png)"></span>
</span>
<span class="ui-icon-yearsviplevel-s">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/yearsvip_s8.png)"></span>
</span>

会员等级图标

Example Copy

测试


            测试
<span class="ui-icon-mq">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/mq_vip.png)"></span>
</span>
<span class="ui-icon-mq">
    <span style="background-image: url(http://i.gtimg.cn/vipstyle/frozenui/1.0.0/img/level/off/mq_yearvip.png)"></span>
</span>

UI 组件

普通小按钮

普通按钮

带进度的按钮

蓝色按钮

红色按钮

普通大按钮

蓝色大按钮

红色大按钮

普通按钮组

底部按钮组

默认面板

猜你喜欢1328条

长书名长书名长书名长书名长书名长书名长书名

小仙

长书名长书名长书名长书名长书名长书名长书名

小仙

长书名长书名长书名长书名长书名长书名长书名

小仙

ui-panel-simple没有下边距

评论1328条更多评论

简单版，标题字体较小

历史搜索：

1.faycheng 2月12日

这本书太赞了，每次看都有不一样的体会和感悟，超级喜欢！期待大结局。

2.faycheng 2月12日

标题标题标题标题标题标题题标题标题标题标题标题标题标题标题标题

3.faycheng 2月12日

标题标题标题标题标题标题题标题标题标题标题标题标题标题标题标题

头像

100*100头像

80*80头像

140*140头像

资料场景

平铺头像

徽标

徽标

标签

角标

搜索框

简单列表

这本书太赞了，每次看都有不一样的体会和感悟，超级喜欢！期待大结局。

标题标题标题标题标题标题题标题标题标题标题标题标题标题标题标题

标题标题标题标题标题标题题标题标题标题标题标题标题标题标题标题

右边有内容的列表

这是标题，加ui-nowrap可以超出长度截断

这是标题，加ui-nowrap可以超出长度截断

这是标题，加ui-nowrap可以超出长度截断

这是标题，加ui-nowrap可以超出长度截断

标题标题标题标题标题标题标

标题标题标题标题标题标题标

文字列表

长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字

生日

图文一行列表

性别

生日

性别

生日

图文列表，active不再默认加上，用js加

ui-list-thumb缩略图

ui-list-thumb-s缩略小图

ui-list-icon icon图

ui-list-icon icon图

通栏和默认带active列表

图文列表带头像

这是标题，加ui-nowrap可以超出长度截断

这是标题，加ui-nowrap可以超出长度截断

图文列表带头像

这是标题，加ui-nowrap可以超出长度截断

这是标题，加ui-nowrap可以超出长度截断

图文列表带小头像

这是标题，加ui-nowrap可以超出长度截断

这是标题，加ui-nowrap可以超出长度截断

图文列表

这是标题，加ui-nowrap可以超出长度截断

标题标题标题标题标题标题标题标题标题标题标题

命令表单项

表单展示项

链接表单项

最近在玩的好友
11

最近在玩的好友
11

最近在玩的好友
11