text: ﻿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> &nbsp;<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> &nbsp;<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> &nbsp;<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> &nbsp;<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>
  ```
  