一、介绍

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

二、知识点

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. RK3568开发笔记（八）：开发板烧写buildroot固件（支持hdmi屏），搭建Qt交叉编译开发环境，编译一个Demo，目标板运行Demo测试

    前言   前面发现开发板用ubuntu固件发现空间不够,本篇使用buildroot固件,来实现目标板运行qt界面应用.   烧写buildroot固件   这部分更详细的参照<RK3568开发笔 ...

  2. Kotlin 协程五 —— 在Android 中使用 Kotlin 协程

    目录 一.Android MVVM 结构 二.添加依赖 三.在后台线程中执行 3.1 协程解决了什么问题 3.2 保证主线程安全 3.3 withContext 的性能 四.结构化并发 4.1 追踪协 ...

  3. ASP.NET Core 微信支付（三）【查询订单 APIV3】

    官方参考资料 查询订单 理论实战 官方提供两种查询订单的方式,一种是根据商户自己生成的订单号查询,一种方式是根据微信生成的订单号查询.而我使用的就是第一种方式. 调用微信支付的查询订单,需要生成签名, ...

  4. 【Azure 应用服务】VS2019发布应用到正在运行的App Service时失败问题的解决

    问题描述 在VS 2019中配置号App Service的Publish Profile后,发布应用出现错误.根据VS 2019中的输出消息可知有文件正在运行中,无法被替换,所以发布失败. 问题解决 ...

  5. Java //使用scanner从键盘输入多种类型

    1 //1.引入包名 import java.util.Scanner 2 //2.新建Scanner对象 3 Scanner scan = new Scanner(system.in); 4 //3 ...

  6. Java 基本数据类型之间的运算规则

    1 /*** 2 * 基本数据类型之间的运算规则 3 * 4 * 前提:7中基本数据类型运算 5 * 6 * 1.自动类型提升: 7 * 当容量小的类型与容量大的数据类型的变量做运算时,结果自动提升为 ...

  7. body标签下莫名奇妙多了一行空行，原来是编码的问题

    之前为了方便,直接在服务器修改文件,然后点保存,但是问题来了,在顶部莫名奇妙多了一个空行,如图1 图1 原来在源代码编辑的代码如图2 图2 但是在FF或者Chrome外部样式却在body里面,而不是h ...

  8. wsl使用记录

    # wsl使用记录 安装 直接参考微软官方文档使用 WSL 在 Windows 上安装 Linux ubuntu可用发行版安装 https://ubuntu.com/wsl 访问 方式一:在资源管理器 ...

  9. base64实现图片多图上传功能

    function webPic_upload($savepath,$url_data){$mark=ture; $pic_url=''; if(is_array($url_data)){ foreac ...

  10. 摆脱鼠标系列 - 浏览器操作 - Vimium C 插件 f 显示链接字母 jk上下移动

    为什么 摆脱鼠标系列 - 浏览器操作 - Vimium C 插件 f 显示链接字母 jk上下移动 百度搜索资料的时候,争取少用鼠标 关闭当前页签 x 左边页签 J 右边页签 K 搜索 /关键字回车 n