基本用法

简单列表:在 .list 内包含所需数目的 .item,如果使用链接 <a> 作为列表条目 .item,则创建了一个可以点击的列表条目。

<div class="list">
  <a class="item">这是列表项目名称</a>
...
</div>

当列表项 .item 中不仅仅包含标题还包括其他内容时,需要将将标题内容放置在 .title 内。

在列表条目中包含头像:将 .avatar 包含在 .item 内的开始,并且为 .item 增加 .with-avatar

如果一个列表中所有条目都包含头像,则只需要在 .list 上增加修饰类 with-avatar 即可。

<div class="list">
  <a class="item with-avatar">
    <div class="avatar circle"><img src="doc/img/avatar.png" alt=""></div>
    <div class="title">Catouse</div>
  </a>
  ...
</div>

在列表条目右侧包含图标:将 .icon 包含在 .item 的末尾。

<div class="list">
  <a class="item">
    <div class="avatar circle"><img src="doc/img/avatar.png" alt=""></div>
    <div class="title">Catouse</div>
    <i class="icon icon-chevron-right muted"></i>
  </a>
</div>

在列表条目右侧包含按钮:将 .btn 包含在 .item 的末尾。

Catouse
我的收藏
查看 
<div class="list">
  <div class="item">
    <div class="avatar circle"><img src="doc/img/avatar.png" alt=""></div>
    <div class="title">Catouse</div>
    <a class="btn text-primary"><i class="icon icon-pencil"></i></a>
  </div>
</div>

在列表条目内包含标签:将 .label 包含在 .item 的末尾,或者将 .label 放置在 .title 中。

<div class="list">
  <a class="item">
    <div class="avatar circle"><img src="doc/img/avatar.png" alt=""></div>
    <div class="title">Catouse</div>
    <span class="label red circle">12 条消息</span>
  </a>
</div>

多行列表条目:为 .item 增加 .multi-lines, 将需要多行显示的内容(例如 .title.subtitle)等放置在 .content 内。

<div class="list">
  <a class="item with-avatar multi-lines">
    <div class="avatar circle"><img src="doc/img/avatar.png" alt=""></div>
    <div class="content">
      <div class="title">Catouse</div>
      <div class="subtitle">面包吞噬者</div>
    </div>
  </a>
</div>
分割线

为列表增加修饰类 .with-divider 来让列表条目之间拥有水平分割线。

<div class="list with-divider">
  ...
</div>

也可以在 .item 前后手动插入 <div class="divider"></div> 来加入分割线。

<div class="list">
  <a class="item">...</a>
  <div class="divider"></div>
  <a class="item">...</a>
  <a class="item">...</a>
  <div class="divider"></div>
  <a class="item">...</a>
  <div class="divider"></div>
  ...
</div>
在列表中包含标题栏

.heading 直接包含在 .list 中。

<div class="list">
    <div class="heading">
      <div class="title">列表标题栏</div>
      ...
    </div>
    <a class="item">...</a>
    ...
</div>
更加紧凑的列表

为列表增加修饰类 .compact 来得到一个更加紧凑的列表。

<div class="list compact">
  ...
</div>
多级列表

.list 内包含另一个 .list 即可创建一个多级列表。虽然没有限制包含的层级,但为体验起见不要创建多余 3 级的包含关系。

<div class="list">
  <a class="item">...</a>
  <div class="list">
    <a class="item">...</a>
    ...
  </div>
  ...
</div>
单独使用列表条目

列表条目可以使用 .list-item 来取代 .item 单独使用,而不需要放置在 .list 中。

<div class="list-item">
  ...
</div>
外观选项

将外观选项中的着色辅助类与 .list.item 一起使用。

外观选项用法参考 基础 > 外观 章节。以下列举的常见用法。