Bootstrap实战 - 评论列表

一、介绍

社交媒体网站盛行，人们常常会使用评论表达自己的观点，评论功能已然成为网站的一部分。

二、知识点

2.1 媒体对象

官方解释：这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右侧对齐的图片（就像博客评论或 Twitter 消息等）。

2.1.1 基础媒体对象

一个基础的媒体对象由四个部分组成：

媒体容器：用样式为 media 包裹在最外层。
媒体对象：常常是用户的头像或者昵称，样式 media-object。
媒体主体：包裹媒体的文本内容部分，样式 media-body。
媒体标题：媒体文本内容的标题，样式 media-heading。

<!--代码部分-->

<div class="media">

    <div class="media-left">

        <a href="#">

            <img src="img/header-animal-1.jpg" class="media-object">

        </a>

    </div>

    <div class="media-body">

        <h4 class="media-heading">我是标题</h4>

        <p>我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容。</p>

    </div>

</div>

        </div>

    </div>

</div>

效果图：

样式 media-left 和 media-right 用来控制对象（头像）放置的左右，若要将对象（头像）放在右边需要把 media-right 放在 media-body 下面。

<!--代码部分-->

<div class="media">

    <div class="media-body">

        <h4 class="media-heading">我是标题</h4>

        <p>我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容。</p>

    </div>

    <div class="media-right">

        <a href="#">

            <img src="img/header-animal-1.jpg" class="media-object">

        </a>

    </div>

</div>

效果图：

当然要是不想放在下面也是有可行办法的，用 pull-left 和 pull-right 代替 media-left 和 media-right 即可。

<!--代码部分-->

<div class="media">

    <div class="pull-left">

        <a href="#">

            <img src="img/header-animal-1.jpg" class="media-object">

        </a>

    </div>

    <div class="media-body">

        <h4 class="media-heading">我是标题 - 左边</h4>

        <p>我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容。</p>

    </div>

</div>

<div class="media">

    <div class="pull-right">

        <a href="#">

            <img src="img/header-animal-1.jpg" class="media-object">

        </a>

    </div>

    <div class="media-body">

        <h4 class="media-heading">我是标题 - 右边</h4>

        <p>我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容。</p>

    </div>

</div>

效果图：

注意：官方从 v3.3.0 版本开始就不再建议使用了 .pull-left 和 .pull-right 了。

2.1.2 多层媒体对象

在使用微博等社交网站时，常常要在别人的评论下面回复别人的评论，这就需要用到媒体对象的嵌套。

使用方法是将整个 media 容器嵌套在上级的内部容器 media-body 内。

<!--代码部分-->

<div class="media">

    <div class="media-left">

        <a href="#">

            <img src="img/header-animal-1.jpg" class="media-object">

        </a>

    </div>

    <div class="media-body">

        <h4 class="media-heading">我是标题 - 一级</h4>

        <p>我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容。</p>

        <div class="media">

            <div class="media-left">

                <a href="#">

                    <img src="img/header-girl-3.jpg" class="media-object">

                </a>

            </div>

            <div class="media-body">

                <h4 class="media-heading">我是标题 - 二级</h4>

                <p>我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容。</p>

                <div class="media">

                    <div class="media-left">

                        <a href="#">

                            <img src="img/header-girl-2.jpg" class="media-object">

                        </a>

                    </div>

                    <div class="media-body">

                        <h4 class="media-heading">我是标题 - 三级</h4>

                        <p>我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容。</p>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

效果图：

虽说 Bootstrap 没有嵌套层数的限制，甚至可以这样无限嵌套。

但一般来说不论是美感还是条理上来看，两层就已经足够了。

2.1.3 媒体对象的对齐

媒体对象（头像）默认的对齐方式是顶部对齐，我们可以通过修改样式来改变对齐方式。使用方法：添加 media-middle 或 media-bottom 使其中部或底部对齐。

<!--代码部分-->

<div class="media">

    <div class="media-left">

        <a href="#">

            <img src="img/header-animal-1.jpg" class="media-object">

        </a>

    </div>

    <div class="media-body">

        <h4 class="media-heading">我是标题 - 顶部对齐</h4>

        <p>我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容。我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容。我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容。我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容。</p>

    </div>

</div>

<div class="media">

    <div class="media-left media-middle">

        <a href="#">

            <img src="img/header-animal-1.jpg" class="media-object">

        </a>

    </div>

    <div class="media-body">

        <h4 class="media-heading">我是标题 - 中部对齐</h4>

        <p>我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容。我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容。我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容。我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容。</p>

    </div>

</div>

<div class="media">

    <div class="media-left media-bottom">

        <a href="#">

            <img src="img/header-animal-1.jpg" class="media-object">

        </a>

    </div>

    <div class="media-body">

        <h4 class="media-heading">我是标题 - 底部对齐</h4>

        <p>我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容。我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容。我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容。我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容。</p>

    </div>

</div>

效果图：

2.1.4 媒体对象列表

评论往往是一排评论，即评论列表，这时候就要用到熟悉的 <ul> + <li> 组合了。使用方法：最外层用元素 <ul> 加样式 media-list 包裹起来，内部每个评论使用元素 <li> 加样式 media。

只有一层的列表：

<!--代码部分-->

<ul class="media-list">

    <li class="media">

        <div class="media-left">

            <a href="#">

                <img src="img/header-animal-1.jpg" class="media-object">

            </a>

        </div>

        <div class="media-body">

            <h4 class="media-heading">我是标题</h4>

            <p>我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容。</p>

        </div>

    </li>

    <li class="media">

        <div class="media-left">

            <a href="#">

                <img src="img/header-animal-1.jpg" class="media-object">

            </a>

        </div>

        <div class="media-body">

            <h4 class="media-heading">我是标题</h4>

            <p>我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容。</p>

        </div>

    </li>

    <li class="media">

        <div class="media-left">

            <a href="#">

                <img src="img/header-animal-1.jpg" class="media-object">

            </a>

        </div>

        <div class="media-body">

            <h4 class="media-heading">我是标题</h4>

            <p>我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容。</p>

        </div>

    </li>

</ul>

效果图：

两层嵌套的列表：

<!--代码部分-->

<ul class="media-list">

    <li class="media">

        <div class="media-left">

            <a href="#">

                <img src="img/header-animal-1.jpg" class="media-object">

            </a>

        </div>

        <div class="media-body">

            <h4 class="media-heading">我是标题 - 一级</h4>

            <p>我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容。</p>

            <ul class="media-list">

                <li class="media">

                    <div class="media-left">

                        <a href="#">

                            <img src="img/header-girl-3.jpg" class="media-object">

                        </a>

                    </div>

                    <div class="media-body">

                        <h4 class="media-heading">我是标题 - 二级</h4>

                        <p>我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容。</p>

                    </div>

                </li>

                <li class="media">

                    <div class="media-left">

                        <a href="#">

                            <img src="img/header-girl-2.jpg" class="media-object">

                        </a>

                    </div>

                    <div class="media-body">

                        <h4 class="media-heading">我是标题 - 二级</h4>

                        <p>我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容。</p>

                    </div>

                </li>

            </ul>

        </div>

    </li>

    <li class="media">

        <div class="media-left">

            <a href="#">

                <img src="img/header-animal-1.jpg" class="media-object">

            </a>

        </div>

        <div class="media-body">

            <h4 class="media-heading">我是标题 - 一级</h4>

            <p>我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容。</p>

            <ul class="media-list">

                <li class="media">

                    <div class="media-left">

                        <a href="#">

                            <img src="img/header-girl-3.jpg" class="media-object">

                        </a>

                    </div>

                    <div class="media-body">

                        <h4 class="media-heading">我是标题 - 二级</h4>

                        <p>我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容。</p>

                    </div>

                </li>

                <li class="media">

                    <div class="media-left">

                        <a href="#">

                            <img src="img/header-girl-2.jpg" class="media-object">

                        </a>

                    </div>

                    <div class="media-body">

                        <h4 class="media-heading">我是标题 - 二级</h4>

                        <p>我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容；我是一大串重复的内容。</p>

                    </div>

                </li>

            </ul>

        </div>

    </li>

</ul>

效果图：

三、实战

用 Bootstrap 媒体对象知识做一个豆瓣日记部分的评论列表。

演示地址：https://mazey.cn/bootstrap-blueprints/lesson-fourth-comment/index.html，源码地址：https://github.com/mazeyqian/bootstrap-blueprints/tree/master/lesson-fourth-comment。

本博客所有的原创文章，作者皆保留版权。转载必须包含本声明，保持本文完整，并以超链接形式注明作者后除和本文原始地址：https://blog.mazey.net/2613.html

（完）