bootstrap 评价页面_文章评论《 HTML5 与 Bootstrap 应用实例 》

文章评论的内容可以单独属于一部分内容... 所以，可以用一组 标签包装一下 ... 在上面定义一个 id ， id="comments"

然后是评论这部分内容的标题 ...

xxx 的评论

标题的下面每条评论的内容 ... 这里我们可以用 Bootstrap 架构的 media 组件来完成这块设计 ...

打开 twitter.github.com/bootstrap .... 点击组件 ... 然后点击 Media object ...

你可以看到它的演示 ... 演示的下面是代码的结构 ... 复制一下 ...

回到网页的代码模式 ... 把这块代码结构粘贴过来 ....

每一条评论内容使用带有 .media 类的

标签包围 ... 然后可以是评论用户的头像 ... 这时我们修改一下 ...

src="content/avatar.jpg" ...

评论的内容用一组带有 .media-body 类的

标签包围住 ... 里面是评论的标题，还有评论的内容 ... 评论标题的元素上要添加一个 .meida-heading 的类 ...

修改一下，可以改成评论的作者的名称 ... 王皓

然后这个标题里，我们可以加上评论发生的时间 ... 先用一组 标签 ... 再添加一组 标签

王皓 2012-01-13 上午 9:00

标题的下面是评论的正文 ...

如果有嵌套的评论内容，比如用户回复的评论内容，我们可以把它放在 .media-boty 元素里面，评论的内容的代码结构是一样的 ...

这里我们可以复制一份评论的内容 ... 在 .media-body 里已经有了一组 .media 的

标签 ... 所以在复制的时候不用复制带 .media 这个类的

标签了...

在这里还少一个 .media-boty 所在的元素的结束标签 ... 我们可以手工加上一个

...

下面再复制一段评论内容 ... 这次从 .media 所在的元素开始 ... 一直到它的结束 ...

然后在这条评论的代码结构的结尾处 ... 另起一行 .... 再把评论内容粘贴过来 ...

样式

下面我们给评论加点样式 ... 首先是评论的作者的头像，我们可以把它变成圆形的 ... 这里需要用到 Bootstrap 架构里为图像准备的样式 ...

找到作者头像 ... 在 标签里添加一个 .img-circle 类 ... 你会看到作者头像就变成圆形的了 ...

同样再处理一下另外两条评论上的作者头像 ....

在评论区域的大标题上，我们再添加一个标签，上面可以显示评论的数量 ...

这里要用到 Bootstrap 架构的标签样式 ...

输入一个空格，然后 .... 3 ...

再打开网页的样式表，改一下这个大标题的字号 ...

先输入一段注释 /* 评论样式 */

然后用 #comments 这个 id 作为样式的选择器 ...

#comments h2 ... 表示找到 #comments 下面的

标签 ...

font-size:18px

再给每条评论的下面添加一点外边距 ..

#comments .media{

margin-bottom:20px

}

这样我们就完成了评论的设计。