[TOC]
## 列表 list
### 简单列表
~~~
<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>
~~~
### 右边有内容的列表
~~~
<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>
~~~
### 文字列表
~~~
<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>
~~~
### 图文一行列表
~~~
<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加
~~~
<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列表
~~~
<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>
~~~
### 图文列表带头像
~~~
<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>
~~~
### 图文列表带头像
~~~
<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>
~~~
### 图文列表带小头像
~~~
<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>
~~~
### 图文列表
~~~
<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>
~~~
