一、介绍

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

二、知识点

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>

效果图：

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

（完）

Bootstrap实战 - 评论列表的更多相关文章

  1. 【读书笔记《Bootstrap 实战》】6.单页营销网站

    我们已经掌握了很多实用 Bootstrap  的重要技能.现在,是时候拿出更多的创意来帮助客户实现他们全方位在线营销的愿望了.此次将带领大家做一个漂亮的单页高端营销网站. 主要任务如下: □ 一个大型 ...

  2. 【读书笔记《Bootstrap 实战》】5.电子商务网站

    构建了公司网站之后,接下来就可以考虑设计一个在线商店了. 此次的设计以上一章的设计为基础, 只是添加了一个包含如下元素的新页面: □ 包含商品小图.标题和说明的产品网格: □ 位于左侧的变懒,用于按类 ...

  3. 【读书笔记《Bootstrap 实战》】4.企业网站

    上一章有对个人作品站点进行一些优化.本章,轮到我们充实这个作品站点了,补充一些项目,从而展示我们的能力.换句话说,我们要构建一个相对复杂的企业网站主页. 下面有几个成功企业的网站: □ Zappos ...

  4. 【读书笔记《Bootstrap 实战》】2.作品展示站点

    假设我们已经想好了要给自己的作品弄一个在线站点.一如既往,时间紧迫.我们需要快一点,但作品展示效果又必须专业.当然,站点还得是响应式的,能够在各种设备上正常浏览,因为这是我们向目标客户推销时的卖点.这 ...

  5. Bootstrap 实战之响应式个人博客 （二）

    阅读本博文前请参考:Bootstrap 实战之响应式个人博客 (一) 一.博客 1.结构 整体博客详情页的结构共包括四部分: 导航栏 博客主体内容 右侧栏:全局搜索框,广告位,推荐阅读 页尾 其中导航 ...

  6. Bootstrap 实战之响应式个人博客 （一）

    一.示例 1.主页 2.博客详情页 3.在线地址 在线地址:入口 Addition:这里使用github-page将自己的静态项目免费部署到线上. 如果你只是做一些简单的静态项目做展示,付出这么大的时 ...

  7. 再一波Python实战项目列表

    前言: 近几年Python可谓是大热啊,很多人都纷纷投入Python的学习中,以前我们实验楼总结过多篇Python实战项目列表,不但有用还有趣,最主要的是咱们实验楼不但有详细的开发教程,更有在线开发环 ...

  8. bootstrap实战教程

    bootstrap实战教程 bootstrap介绍 简介 Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.全球数以百万计的网站都是 ...

  9. Vue把父组件的方法传递给子组件调用(评论列表例子)

    Vue把父组件的方法传递给子组件调用(评论列表例子) 效果展示: 相关Html: <!DOCTYPE html> <html lang="en"> < ...

  10. vue实现一个评论列表

    <!DOCTYPE html> <html> <head> <title>简易评论列表</title> <meta charset=& ...

随机推荐

  1. 【Azure 应用服务】在Azure App Service for Windows 中部署Java/NodeJS/Python项目时，web.config的配置模板内容

    问题描述 在Azure App Service for Windows 中部署web项目时候,需要在wwwroot下设置web.config,对于不同语言的项目,web.config文件中的httpP ...

  2. ubuntu版本为16.04，英文改成中文解决方法和解决中文输入法无效的问题，关于无法打开锁文件的解决方法

    https://jingyan.baidu.com/article/4853e1e565e1781908f7266c.html,根据这篇文章操作完成后重启ubuntu之后ubuntu就会变成中文,重启 ...

  3. uniapp同步将本地图片转换为base64，支持微信、H5、APP

    接上篇,少了一个方法的源代码. 先上代码: ploadFilePromiseSync = (url) => { return new Promise((resolve, reject) => ...

  4. Mysql数据库未添加索引引发的生产事故

    最近开发的新功能主要是首页的红点提示功能,某个用户登录系统app,然后进入某一个功能模块, 在该功能下面有很多地方可以操作,新功能就是根据用户信息查询当月是否存在新的数据.总共有四五 个地方如果出现增 ...

  5. Jetpack Compose(3) —— 状态管理

    上一篇文章拿 TextField 组件举例时,提到了 State,即状态.本篇文章,即讲解 State 的相关改概念. 一.什么是状态 与其它声明式 UI 框架一样,Compose 的职责非常单纯,仅 ...

  6. 海词 dict.cn 有 词义饼状分布图 和 词性饼状分布图 - 词典推荐

    海词 dict.cn 有 词义饼状分布图 和 词性饼状分布图 http://dict.cn/like

  7. JavaFx实现倒计时按钮组件(类似发送激活码)

    原文地址: JavaFx实现倒计时按钮组件(类似发送激活码) - Stars-One的杂货小窝 本文基于TornadoFx框架进行编写,封装工具代码是kotlin版本 然后也是顺便把这个封装成了sta ...

  8. Ubuntu 的源相关介绍（最近在配gstreamer的时候,紧急补充的知识）

    PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明   本文作为本人csdn blog的主站的备份.(Bl ...

  9. 记录--为什么推荐用svg而不用icon?

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 使用背景: 1.因为svg图标在任何设备下都可以高清显示,不会模糊.而icon会在显卡比较低的电脑上有显示模糊的情况 2.svg图标在页面 ...

  10. Openlayers 加载ArcGIS Server切片服务（自定义切片方案）

    背景 最近遇到一个需求,要使用OpenLayer加载ArcGIS Server发布的服务.如果直接拷贝OpenLayer提供的在线官方Demo,然后修改下地图服务地址是跑不通的,这是因为OpenLay ...