Bootstrap实战 - 评论列表

一、介绍

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

二、知识点

2.1 媒体对象

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

2.1.1 基础媒体对象

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

  1. 媒体容器：用样式为 media 包裹在最外层。
  2. 媒体对象：常常是用户的头像或者昵称，样式 media-object。
  3. 媒体主体：包裹媒体的文本内容部分，样式 media-body。
  4. 媒体标题：媒体文本内容的标题，样式 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>

效果图：

image

样式 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>

效果图：

image

当然要是不想放在下面也是有可行办法的，用 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>

效果图：

image

注意：官方从 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>

效果图：

为了展示效果给图片加了50px的宽度。

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

image

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

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>

效果图：

image

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>

效果图：

image

两层嵌套的列表：

<!--代码部分-->
<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>

效果图：

image

三、实战

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

image

演示地址：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

（完）

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 158,233评论 4赞 360
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,013评论 1赞 291
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 108,030评论 0赞 241
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,827评论 0赞 204
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,221评论 3赞 286
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,542评论 1赞 216
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,814评论 2赞 312
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,513评论 0赞 198
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,225评论 1赞 241
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,497评论 2赞 244
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,998评论 1赞 258
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,342评论 2赞 253
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 32,986评论 3赞 235
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,812评论 0赞 194
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,560评论 2赞 271
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,461评论 2赞 266

推荐阅读更多精彩内容