简单列表:在 .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>
<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>
<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
一起使用。
外观选项用法参考 基础 > 外观 章节。以下列举的常见用法。