一、介绍
社交媒体网站流行，人们经常会应用评论表白本人的观点，评论性能未然成为网站的一部分。
二、知识点
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
（完）