BootStrap留言逐条展示

来源：互联网发布：鬼吹灯和盗墓笔记知乎编辑：程序博客网时间：2024/06/05 10:12
前言：

制作一个简单留言展示，类似于csdn，空间的留言展示。
效果展示：

这里写图片描述
源码：

主要使用的bootstrap框架进行设计
h5源码：

<div>                <div class="row">                            <div class="col-lg-4">                                <ul class="list-group">                                    <li class="list-group-item">                                        <span class="badge list-group-item-success">4</span>                                        这里已经有很多评论啦！                                    </li>                                </ul>                            </div>                        </div>                        <div class="media">                            <div class="media-left">                                <img class="media-object" src="./images/36.jpg" alt="...">                            </div>                            <div class="media-body">                                <h4 class="media-heading">小明</h4>                                <p>有来过，666666。</p>                                <p>4楼&nbsp;&nbsp;2017-08-08&nbsp;&nbsp;23:15发表</p>                                <hr>                            </div>                        </div>                        <div class="media">                            <div class="media-left">                                <img class="media-object" src="./images/36.jpg" alt="...">                            </div>                            <div class="media-body">                                <h4 class="media-heading">linda</h4>                                <p>Cras sit amet nibh libero, in gr</p>                                <p>3楼&nbsp;&nbsp;2017-08-08&nbsp;&nbsp;23:15发表</p>                                <hr>                            </div>                        </div>                        <div class="media">                            <div class="media-left">                                <img class="media-object" src="./images/36.jpg" alt="...">                            </div>                            <div class="media-body">                                <h4 class="media-heading">213213hkhkh</h4>                                <p>Clla vel metus scelerisqpis.</p>                                <p>2楼&nbsp;&nbsp;2017-08-08&nbsp;&nbsp;23:15发表</p>                                <hr>                            </div>                        </div>                        <div class="media">                            <div class="media-left">                                <img class="media-object" src="./images/36.jpg" alt="...">                            </div>                            <div class="media-body">                                <h4 class="media-heading">Media heading</h4>                                <p>Cras sit amet nibherra turpis.</p>                                <p>1楼&nbsp;&nbsp;2017-08-08&nbsp;&nbsp;23:15发表</p>                                <hr>                            </div>                        </div>                        <div class="text-center">                            <button class="btn btn-default btn-block">查看更多</button>                        </div></div>
阅读全文
0 0