基本用法

简单列表：在 .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 的末尾。

Catouse

李四

<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 中。

Catouse

12 条消息

李

李雷金牌教师

<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 来让列表条目之间拥有水平分割线。

首页项目 BUG

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

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

首页

项目

BUG

<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 中。

快速访问

产品项目 BUG

热门用户

<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 一起使用。

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

首页项目 BUG