使用 <ul>
结构嵌套链接列表,添加 .am-list
。
<ul class="am-list">
<li><a href="#">每个人都有一个死角, 自己走不出来,别人也闯不进去。</a></li>
<li><a href="#">我把最深沉的秘密放在那里。</a></li>
<li><a href="#">你不懂我,我不怪你。</a></li>
<li><a href="#">每个人都有一道伤口, 或深或浅,盖上布,以为不存在。</a></li>
</ul>
在 <a>
上添加 .am-text-truncate
class 可以实现文字超出一行时截断为 ...
。
<ul class="am-list">
<li><a href="#" class="am-text-truncate">每个人都有一个死角, 自己走不出来,别人也闯不进去。我把最深沉的秘密放在那里。每个人都有一道伤口, 或深或浅,盖上布,以为不存在。</a></li>
</ul>
在 .am-list
的基础上添加 .am-list-static
。
<ul class="am-list am-list-static">
<li>...</li>
</ul>
在容器上添加 .am-list-border
class。
<ul class="am-list am-list-static am-list-border">
<li>...</li>
</ul>
<ul class="am-list am-list-border">
<li>...</li>
</ul>
添加 .am-list-striped
class。
<ul class="am-list am-list-static am-list-border am-list-striped">
<li>...</li>
</ul>
<ul class="am-list am-list-static am-list-border">
<li>
<span class="am-badge am-badge-success">YES</span> <span class="am-badge am-badge-danger">NO</span>
每个人都有一个死角, 自己走不出来,别人也闯不进去。</li>
</ul>
<ul class="am-list am-list-static am-list-border">
<li>
<i class="am-icon-home am-icon-fw"></i>
每个人都有一个死角, 自己走不出来,别人也闯不进去。</li>
<li>
<i class="am-icon-book am-icon-fw"></i>
我把最深沉的秘密放在那里。</li>
<li><i class="am-icon-pencil am-icon-fw"></i>你不懂我,我不怪你。</li>
</ul>
<ul class="am-list am-list-border">
<li><a href="#"><i class="am-icon-home am-icon-fw"></i>
每个人都有一个死角, 自己走不出来,别人也闯不进去。</a></li>
<li><a href="#"> <i class="am-icon-book am-icon-fw"></i>
我把最深沉的秘密放在那里。</a></li>
<li><a href="#"><i class="am-icon-pencil am-icon-fw"></i>你不懂我,我不怪你。</a></li>
</ul>
见 Panel 组件。