zui
Version:
一个基于 Bootstrap 深度定制开源前端实践方案，帮助你快速构建现代跨屏应用。
630 lines (595 loc) • 23.1 kB
Markdown
section: view
id: comment
description: 展示评论的列表视图
icon: icon-comments
filter: pinglun pl
---
# 评论
评论视图用于展示评论消息，评论列表允许进行嵌套。
## 结构
评论视图使用 `.comments` 作为父级容器，并使用如下特殊类标记子容器：
<table class="table">
<tbody>
<tr>
<td style="width: 150px">`<header>`</td>
<td style="width: 80px">头部</td>
<td>标题等信息</td>
</tr>
<tr>
<td>`.comments-list`</td>
<td>列表项组</td>
<td>`.comments-list` 也可以嵌套放入 `.comment` 内。</td>
</tr>
<tr>
<td>`<footer>`</td>
<td>底部</td>
<td>显示评论表达及分页信息等。</td>
</tr>
</tbody>
</table>
一般 HTML 结构如下：
```html
<div class="comments">
<header>
<h1>所有评论</h1>
</header>
<div class="comments-list">
<div class="comment">
...
</div>
...
</div>
<footer>
<form action="">
...
</form>
</footer>
</div>
```
## 评论条目
评论条目使用 `.comment` 类标识。在评论条目内可以使用如下特殊类：
- `.avatar`，可选，用于包含一张图片作为发表评论的用户头像；
- `.content`，用于包含评论内容的容器；
- `.text`，用于包裹评论正文内容的容器，作为 `.content` 的直接子元素；
- `.actions`，用于包裹评论操作按钮或链接，作为 `.content` 的直接子元素；
- `.comments-list`，为该条评论嵌套一个新的评论列表，一般用于显示用户回复的评论条目。
### 一般形式
包含用户头像、用户名称、操作链接、发布时间等。
<example>
<div class="comment">
<a href="###" class="avatar">
<i class="icon-user icon-2x"></i>
</a>
<div class="content">
<div class="pull-right text-muted">2 个小时前</div>
<div><a href="###"><strong>Catouse</strong></a> <span class="text-muted">回复</span> <a href="###">张士超</a></div>
<div class="text">你到底把我家钥匙放哪里了...</div>
<div class="actions">
<a href="##">回复</a>
<a href="##">编辑</a>
<a href="##">删除</a>
</div>
</div>
</div>
</example>
```html
<div class="comment">
<a href="###" class="avatar">
<i class="icon-user icon-2x"></i>
</a>
<div class="content">
<div class="pull-right text-muted">2 个小时前</div>
<div><a href="###"><strong>Catouse</strong></a> <span class="text-muted">回复</span> <a href="###">张士超</a></div>
<div class="text">你到底把我家钥匙放哪里了...</div>
<div class="actions">
<a href="##">回复</a>
<a href="##">编辑</a>
<a href="##">删除</a>
</div>
</div>
</div>
```
<div class="alert alert-primary-inverse">
<h4>自定义头像</h4>
<p>文档内使用图标作为头像内容仅仅作为演示，并非 ZUI 提供，你需要在 .avatar 内包含一张图片用作头像内容。</p>
</div>
### 不包含头像
直接移除 `.avatar` 元素即可。
<example>
<div class="comment">
<div class="content">
<div class="pull-right text-muted">2 个小时前</div>
<div><a href="###"><strong>Catouse</strong></a> <span class="text-muted">回复</span> <a href="###">张士超</a></div>
<div class="text">你到底把我家钥匙放哪里了...</div>
<div class="actions">
<a href="##">回复</a>
<a href="##">编辑</a>
<a href="##">删除</a>
</div>
</div>
</div>
</example>
```html
<div class="comment">
<div class="content">
<div class="pull-right text-muted">2 个小时前</div>
<div><a href="###"><strong>Catouse</strong></a> <span class="text-muted">回复</span> <a href="###">张士超</a></div>
<div class="text">你到底把我家钥匙放哪里了...</div>
<div class="actions">
<a href="##">回复</a>
<a href="##">编辑</a>
<a href="##">删除</a>
</div>
</div>
</div>
```
### 嵌套评论列表
在 `.comment` 内直接包含一个新的 `.comments-list` 即可。
<example>
<div class="comment">
<a href="###" class="avatar">
<i class="icon-camera-retro icon-2x"></i>
</a>
<div class="content">
<div class="pull-right text-muted">3 个小时前</div>
<div><a href="###"><strong>张士超</strong></a></div>
<div class="text">今天玩的真开心！~~~~~~</div>
<div class="actions">
<a href="##">回复</a>
</div>
</div>
<div class="comments-list">
<div class="comment">
<a href="###" class="avatar">
<i class="icon-user icon-2x"></i>
</a>
<div class="content">
<div class="pull-right text-muted">2 个小时前</div>
<div><a href="###"><strong>Catouse</strong></a> <span class="text-muted">回复</span> <a href="###">张士超</a></div>
<div class="text">你到底把我家钥匙放哪里了...</div>
<div class="actions">
<a href="##">回复</a>
<a href="##">编辑</a>
<a href="##">删除</a>
</div>
</div>
<div class="comments-list">
<div class="comment">
<a href="###" class="avatar">
<i class="icon-yinyang icon-2x"></i>
</a>
<div class="content">
<div class="pull-right text-muted">1 个小时前</div>
<div><a href="###"><strong>门口大爷</strong></a> <span class="text-muted">回复</span> <a href="###">Catouse</a></div>
<div class="text">不在我这儿...</div>
<div class="actions">
<a href="##">回复</a>
</div>
</div>
</div>
<div class="comment">
<a href="###" class="avatar">
<i class="icon-cube-alt icon-2x"></i>
</a>
<div class="content">
<div class="pull-right text-muted">1 个小时前</div>
<div><a href="###"><strong>队长</strong></a> <span class="text-muted">回复</span> <a href="###">Catouse</a></div>
<div class="text">也不在我这儿...</div>
<div class="actions">
<a href="##">回复</a>
</div>
</div>
</div>
</div>
</div>
<div class="comment">
<a href="###" class="avatar">
<i class="icon-heart-empty icon-2x"></i>
</a>
<div class="content">
<div class="pull-right text-muted">30 分钟前</div>
<div><a href="###"><strong>华师大第一美女</strong></a> <span class="text-muted">回复</span> <a href="###">张士超</a></div>
<div class="text">很开心~~~</div>
<div class="actions">
<a href="##">回复</a>
</div>
</div>
</div>
</div>
</div>
</example>
<template class="pre-scrollable linenums"/>
```html
<div class="comment">
<a href="###" class="avatar">
<i class="icon-camera-retro icon-2x"></i>
</a>
<div class="content">
<div class="pull-right text-muted">3 个小时前</div>
<div><a href="###"><strong>张士超</strong></a></div>
<div class="text">今天玩的真开心！~~~~~~</div>
<div class="actions">
<a href="##">回复</a>
</div>
</div>
<div class="comments-list">
<div class="comment">
<a href="###" class="avatar">
<i class="icon-user icon-2x"></i>
</a>
<div class="content">
<div class="pull-right text-muted">2 个小时前</div>
<div><a href="###"><strong>Catouse</strong></a> <span class="text-muted">回复</span> <a href="###">张士超</a></div>
<div class="text">你到底把我家钥匙放哪里了...</div>
<div class="actions">
<a href="##">回复</a>
<a href="##">编辑</a>
<a href="##">删除</a>
</div>
</div>
<div class="comments-list">
<div class="comment">
<a href="###" class="avatar">
<i class="icon-yinyang icon-2x"></i>
</a>
<div class="content">
<div class="pull-right text-muted">1 个小时前</div>
<div><a href="###"><strong>门口大爷</strong></a> <span class="text-muted">回复</span> <a href="###">Catouse</a></div>
<div class="text">不在我这儿...</div>
<div class="actions">
<a href="##">回复</a>
</div>
</div>
</div>
<div class="comment">
<a href="###" class="avatar">
<i class="icon-cube-alt icon-2x"></i>
</a>
<div class="content">
<div class="pull-right text-muted">1 个小时前</div>
<div><a href="###"><strong>队长</strong></a> <span class="text-muted">回复</span> <a href="###">Catouse</a></div>
<div class="text">也不在我这儿...</div>
<div class="actions">
<a href="##">回复</a>
</div>
</div>
</div>
</div>
</div>
<div class="comment">
<a href="###" class="avatar">
<i class="icon-heart-empty icon-2x"></i>
</a>
<div class="content">
<div class="pull-right text-muted">30 分钟前</div>
<div><a href="###"><strong>华师大第一美女</strong></a> <span class="text-muted">回复</span> <a href="###">张士超</a></div>
<div class="text">很开心~~~</div>
<div class="actions">
<a href="##">回复</a>
</div>
</div>
</div>
</div>
</div>
```
<div class="alert alert-primary-inverse">
<h4>限制嵌套层次</h4>
<p>虽然你可以无限的嵌套评论列表，但受限于视窗大小和便于用户阅读，不应该使用超过 3 个层级的嵌套。</p>
</div>
## 评论表单
评论表单通常放置在 `<footer>` 内。在 `<form>` 上添加 `.reply-form` 类来获得外观一致性的评论表单。
<example>
<div class="comments">
<section class="comments-list">
<div class="comment">
<a href="###" class="avatar">
<i class="icon-user icon-2x"></i>
</a>
<div class="content">
<div class="pull-right text-muted">2 个小时前</div>
<div><a href="###"><strong>Catouse</strong></a> <span class="text-muted">回复</span> <a href="###">张士超</a></div>
<div class="text">你到底把我家钥匙放哪里了...</div>
<div class="actions">
<a href="##">回复</a>
<a href="##">编辑</a>
<a href="##">删除</a>
</div>
</div>
</div>
</section>
<footer>
<div class="reply-form" id="commentReplyForm1">
<a href="###" class="avatar"><i class="icon-user icon-2x"></i></a>
<form class="form">
<div class="form-group">
<textarea class="form-control new-comment-text" rows="2" placeholder="撰写评论..."></textarea>
</div>
<div class="form-group comment-user">
<div class="row">
<div class="col-md-3">
<span class="pull-right">或者</span>
<a href="#">登录</a> <a href="##">注册</a>
</div>
<div class="col-md-7">
<div class="form-group">
<input type="text" class="form-control" id="nameInputEmail1" placeholder="输入评论显示名称">
</div>
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="输入电子邮件（不会在评论显示）">
</div>
</div>
<div class="col-md-2"><button type="submit" class="btn btn-block btn-primary"><i class="icon-ok"></i></button></div>
</div>
</div>
</form>
</div>
</footer>
</div>
</example>
<template class="pre-scrollable linenums"/>
```html
<div class="comments">
<section class="comments-list">
<div class="comment">
<a href="###" class="avatar">
<i class="icon-user icon-2x"></i>
</a>
<div class="content">
<div class="pull-right text-muted">2 个小时前</div>
<div><a href="###"><strong>Catouse</strong></a> <span class="text-muted">回复</span> <a href="###">张士超</a></div>
<div class="text">你到底把我家钥匙放哪里了...</div>
<div class="actions">
<a href="##">回复</a>
<a href="##">编辑</a>
<a href="##">删除</a>
</div>
</div>
</div>
</section>
<footer>
<div class="reply-form" id="commentReplyForm1">
<a href="###" class="avatar"><i class="icon-user icon-2x"></i></a>
<form class="form">
<div class="form-group">
<textarea class="form-control new-comment-text" rows="2" placeholder="撰写评论..."></textarea>
</div>
<div class="form-group comment-user">
<div class="row">
<div class="col-md-3">
<span class="pull-right">或者</span>
<a href="#">登录</a> <a href="##">注册</a>
</div>
<div class="col-md-7">
<div class="form-group">
<input type="text" class="form-control" id="nameInputEmail1" placeholder="输入评论显示名称">
</div>
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="输入电子邮件（不会在评论显示）">
</div>
</div>
<div class="col-md-2"><button type="submit" class="btn btn-block btn-primary"><i class="icon-ok"></i></button></div>
</div>
</div>
</form>
</div>
</footer>
</div>
```
## 综合示例
<example style="padding-bottom: 0">
<div class="comments">
<header>
<div class="pull-right"><a href="#commentReplyForm2" class="btn btn-primary"><i class="icon-comment-alt"></i> 发表评论</a></div>
<h3>所有评论</h3>
</header>
<section class="comments-list">
<div class="comment">
<a href="###" class="avatar">
<i class="icon-camera-retro icon-2x"></i>
</a>
<div class="content">
<div class="pull-right text-muted">3 个小时前</div>
<div><a href="###"><strong>张士超</strong></a></div>
<div class="text">今天玩的真开心！~~~~~~</div>
<div class="actions">
<a href="##">回复</a>
</div>
</div>
<div class="comments-list">
<div class="comment">
<a href="###" class="avatar">
<i class="icon-user icon-2x"></i>
</a>
<div class="content">
<div class="pull-right text-muted">2 个小时前</div>
<div><a href="###"><strong>Catouse</strong></a> <span class="text-muted">回复</span> <a href="###">张士超</a></div>
<div class="text">你到底把我家钥匙放哪里了...</div>
<div class="actions">
<a href="##">回复</a>
<a href="##">编辑</a>
<a href="##">删除</a>
</div>
</div>
<div class="comments-list">
<div class="comment">
<a href="###" class="avatar">
<i class="icon-yinyang icon-2x"></i>
</a>
<div class="content">
<div class="pull-right text-muted">1 个小时前</div>
<div><a href="###"><strong>门口大爷</strong></a> <span class="text-muted">回复</span> <a href="###">Catouse</a></div>
<div class="text">不在我这儿...</div>
<div class="actions">
<a href="##">回复</a>
</div>
</div>
</div>
<div class="comment">
<a href="###" class="avatar">
<i class="icon-cube-alt icon-2x"></i>
</a>
<div class="content">
<div class="pull-right text-muted">1 个小时前</div>
<div><a href="###"><strong>队长</strong></a> <span class="text-muted">回复</span> <a href="###">Catouse</a></div>
<div class="text">也不在我这儿...</div>
<div class="actions">
<a href="##">回复</a>
</div>
</div>
</div>
</div>
</div>
<div class="comment">
<a href="###" class="avatar">
<i class="icon-heart-empty icon-2x"></i>
</a>
<div class="content">
<div class="pull-right text-muted">30 分钟前</div>
<div><a href="###"><strong>华师大第一美女</strong></a> <span class="text-muted">回复</span> <a href="###">张士超</a></div>
<div class="text">很开心~~~</div>
<div class="actions">
<a href="##">回复</a>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="reply-form" id="commentReplyForm2">
<a href="###" class="avatar"><i class="icon-user icon-2x"></i></a>
<form class="form">
<div class="form-group">
<textarea class="form-control new-comment-text" rows="2" placeholder="撰写评论..."></textarea>
</div>
<div class="form-group comment-user">
<div class="row">
<div class="col-md-3">
<span class="pull-right">或者</span>
<a href="#">登录</a> <a href="##">注册</a>
</div>
<div class="col-md-7">
<div class="form-group">
<input type="text" class="form-control" id="nameInputEmail1" placeholder="输入评论显示名称">
</div>
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="输入电子邮件（不会在评论显示）">
</div>
</div>
<div class="col-md-2"><button type="submit" class="btn btn-block btn-primary"><i class="icon-ok"></i></button></div>
</div>
</div>
</form>
</div>
</footer>
</div>
</example>
<template class="pre-scrollable linenums"/>
```html
<div class="comments">
<header>
<div class="pull-right"><a href="#commentReplyForm2" class="btn btn-primary"><i class="icon-comment-alt"></i> 发表评论</a></div>
<h3>所有评论</h3>
</header>
<section class="comments-list">
<div class="comment">
<a href="###" class="avatar">
<i class="icon-camera-retro icon-2x"></i>
</a>
<div class="content">
<div class="pull-right text-muted">3 个小时前</div>
<div><a href="###"><strong>张士超</strong></a></div>
<div class="text">今天玩的真开心！~~~~~~</div>
<div class="actions">
<a href="##">回复</a>
</div>
</div>
<div class="comments-list">
<div class="comment">
<a href="###" class="avatar">
<i class="icon-user icon-2x"></i>
</a>
<div class="content">
<div class="pull-right text-muted">2 个小时前</div>
<div><a href="###"><strong>Catouse</strong></a> <span class="text-muted">回复</span> <a href="###">张士超</a></div>
<div class="text">你到底把我家钥匙放哪里了...</div>
<div class="actions">
<a href="##">回复</a>
<a href="##">编辑</a>
<a href="##">删除</a>
</div>
</div>
<div class="comments-list">
<div class="comment">
<a href="###" class="avatar">
<i class="icon-yinyang icon-2x"></i>
</a>
<div class="content">
<div class="pull-right text-muted">1 个小时前</div>
<div><a href="###"><strong>门口大爷</strong></a> <span class="text-muted">回复</span> <a href="###">Catouse</a></div>
<div class="text">不在我这儿...</div>
<div class="actions">
<a href="##">回复</a>
</div>
</div>
</div>
<div class="comment">
<a href="###" class="avatar">
<i class="icon-cube-alt icon-2x"></i>
</a>
<div class="content">
<div class="pull-right text-muted">1 个小时前</div>
<div><a href="###"><strong>队长</strong></a> <span class="text-muted">回复</span> <a href="###">Catouse</a></div>
<div class="text">也不在我这儿...</div>
<div class="actions">
<a href="##">回复</a>
</div>
</div>
</div>
</div>
</div>
<div class="comment">
<a href="###" class="avatar">
<i class="icon-heart-empty icon-2x"></i>
</a>
<div class="content">
<div class="pull-right text-muted">30 分钟前</div>
<div><a href="###"><strong>华师大第一美女</strong></a> <span class="text-muted">回复</span> <a href="###">张士超</a></div>
<div class="text">很开心~~~</div>
<div class="actions">
<a href="##">回复</a>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="reply-form" id="commentReplyForm2">
<a href="###" class="avatar"><i class="icon-user icon-2x"></i></a>
<form class="form">
<div class="form-group">
<textarea class="form-control new-comment-text" rows="2" placeholder="撰写评论..."></textarea>
</div>
<div class="form-group comment-user">
<div class="row">
<div class="col-md-3">
<span class="pull-right">或者</span>
<a href="#">登录</a> <a href="##">注册</a>
</div>
<div class="col-md-7">
<div class="form-group">
<input type="text" class="form-control" id="nameInputEmail1" placeholder="输入评论显示名称">
</div>
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="输入电子邮件（不会在评论显示）">
</div>
</div>
<div class="col-md-2"><button type="submit" class="btn btn-block btn-primary"><i class="icon-ok"></i></button></div>
</div>
</div>
</form>
</div>
</footer>
</div>
```