List列表
- 列表项
<div class="bx-list">
<div class="bx-list-item">列表项1</div>
<div class="bx-list-item">列表项2</div>
<div class="bx-list-item">
<div class="bx-list-item-title">
列表1
</div>
<div class="bx-list-item-extra">说明文字</div>
</div>
<div class="bx-list-item">
<div class="bx-list-item-title">
列表1
</div>
<div class="bx-list-item-extra">说明文字</div>
</div>
<div class="bx-list-item">
<div class="bx-list-item-title">
列表1
</div>
<div class="bx-list-item-link">
<i class="bx-icon bx-icon-arrows-right"></i>
</div>
</div>
<div class="bx-list-item">
<div class="bx-list-item-title">
列表1
</div>
<div class="bx-list-item-extra">
<span>说明文字</span>
</div>
<div class="bx-list-item-link">
<i class="bx-icon bx-icon-arrows-right"></i>
</div>
</div>
<div class="bx-list-item">
<div class="bx-list-item-icon">
<img src="http://img.winbaoxian.com/autoUpload/learning/avatar_default_79148af363.png"/>
</div>
<div class="bx-list-item-title">列表1</div>
<div class="bx-list-item-extra">说明文字</div>
</div>
<div class="bx-list-item">
<div class="bx-list-item-icon">
<i class="bx-icon bx-icon-image"></i>
</div>
<div class="bx-list-item-title">列表1</div>
<div class="bx-list-item-extra">说明文字</div>
<div class="bx-list-item-link">
<i class="bx-icon bx-icon-arrows-right"></i>
</div>
</div>
</div>
- 左右文字组合列表
<ul class="bx-list">
<li class="bx-list-item">
<div class="bx-list-item-title">姓名</div>
<div class="bx-list-item-value">邱国荣</div>
<div class="bx-list-item-link">
<i class="bx-icon bx-icon-arrows-right"></i>
</div>
</li>
<li class="bx-list-item">
<div class="bx-list-item-title">性别</div>
<div class="bx-list-item-value">男</div>
<div class="bx-list-item-link">
<i class="bx-icon bx-icon-arrows-right"></i>
</div>
</li>
<li class="bx-list-item">
<div class="bx-list-item-title">邮箱</div>
<div class="bx-list-item-value">[email protected]</div>
<div class="bx-list-item-link">
<i class="bx-icon bx-icon-arrows-right"></i>
</div>
</li>
</ul>
- 图文组合列表
<ul class="bx-list">
<li class="bx-list-item">
<div class="bx-list-item-inner">
<div class="bx-list-item-title">标题</div>
<div class="bx-list-item-subtitle">列表副文案列表副文案列表副文案列表副文案</div>
</div>
</li>
<li class="bx-list-item">
<div class="bx-list-item-inner">
<div class="bx-list-item-title bx-text-ellipsis">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</div>
<div class="bx-list-item-subtitle bx-text-ellipsis-two">列表副文案列表副文案列表副文案列表副文案列表副文案列表副文案列表副文案列表副文案列表副文案列表副文案列表副文案列表副文案列表副文案列表副文案列表副文案列表副文案列表副文案列表副文案列表副文案列表副文案列表副文案列表副文案列表副文案列表副文案列表副文案列表副文案列表副文案列表副文案</div>
</div>
</li>
<li class="bx-list-item">
<div class="bx-list-item-inner">
<div class="bx-list-item-title bx-flex">
<p class="bx-flex-item bx-text-ellipsis">标题限制11个字标题限制11个字标题限制11个字</p>
<p class="demo-list-item-time">2017-02-08 12:11:53</p>
</div>
<div class="bx-list-item-subtitle">张某某</div>
</div>
</li>
<li class="bx-list-item">
<div class="bx-list-item-image">
<img src="http://img.winbaoxian.com/autoUpload/learning/avatar_default_79148af363.png"/>
</div>
<div class="bx-list-item-inner">
<div class="bx-list-item-title bx-text-ellipsis-one">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</div>
<div class="bx-list-item-subtitle bx-text-ellipsis-three">副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题</div>
</div>
</li>
</ul>