乐趣区

关于前端:Bootstrap实战-评论列表

jiezi

一、介绍

社交媒体网站流行，人们经常会应用评论表白本人的观点，评论性能未然成为网站的一部分。

二、知识点

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

（完）

退出移动版