简单的bootstrap的QQ应用页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <title>Title</title>
    <style>
        body {
            height: 1500px;
        }

        .myItem {
            background-color: #17B7EB;
           margin: 0 auto;
        }

        .text {
            display: block;
        }

        img {
            width: 50px;
            height: 50px;
        }
        .mybottom{
            text-align: center;
            width: 100%;

        }

    </style>


</head>
<body>
<div class="container">
    <div class="row">
        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container myItem">
                <div class="pull-left">
                    <img src="images/1.jpg" height="71" width="76"/>
                </div>
                <div class="pull-right">
                    <img src="images/2.jpg" height="71" width="76"/>
                </div>
            </div>
        </nav>
        <ul class="list-group" style="margin-top: 55px">
<!--                <li class="list-group-item myItem col-xs-12 navbar-fixed-top">-->
<!--                    <span class="badge"><img src="images/2.jpg" height="50" width="50"/></span>-->
<!--                    <img src="images/1.jpg" height="50" width="50"/>-->
<!--                </li>-->
                <li class="list-group-item col-xs-12">
                    <span class="badge">1</span>
                    <div class="media">
                        <div class="media-left media-middle">
                            <a href="#">
                                <img class="media-object" src="images/3.jpg" alt="...">
                            </a>
                        </div>
                        <div class="media-body">
                            <h3 class="media-heading">summer</h3>
                            <h4 class="media-heading">在吗?</h4>
                        </div>
                    </div>
                </li>


                <li class="list-group-item col-xs-12 ">
                    <div class="media">
                        <div class="media-left media-middle">
                            <a href="#">
                                <img class="media-object" src="images/4.jpg" alt="...">
                            </a>
                        </div>
                        <div class="media-body">
                            <h3 class="media-heading">群通知</h3>
                            <h4 class="media-heading">欢迎邀请你加入群</h4>
                        </div>
                    </div>
                </li>


                <li class="list-group-item col-xs-12">
                    <div class="media">
                        <div class="media-left media-middle">
                            <a href="#">
                                <img class="media-object" src="images/5.jpg" alt="...">
                            </a>
                        </div>
                        <div class="media-body">
                            <h3 class="media-heading">小美</h3>
                            <h4 class="media-heading">马上放长假了,我们一起去旅游呀!</h4>
                        </div>
                    </div>
                </li>


                <li class="list-group-item col-xs-12">
                    <span class="badge">1</span>
                    <div class="media">
                        <div class="media-left media-middle">
                            <a href="#">
                                <img class="media-object" src="images/6.jpg" alt="...">
                            </a>
                        </div>
                        <div class="media-body">
                            <h3 class="media-heading">娟娟姐</h3>
                            <h4 class="media-heading">啥时候回来?</h4>
                        </div>
                    </div>
                </li>
                <li class="list-group-item col-xs-12">
                    <div class="media">
                        <div class="media-left media-middle">
                            <a href="#">
                                <img class="media-object" src="images/7.jpg" alt="...">
                            </a>
                        </div>
                        <div class="media-body">
                            <h3 class="media-heading">QQ购物车</h3>
                            <h4 class="media-heading">清仓连衣裙1元秒杀?</h4>
                        </div>
                    </div>
                </li>
                <li class="list-group-item col-xs-12">
                    <div class="media">
                        <div class="media-left media-middle">
                            <a href="#">
                                <img class="media-object" src="images/8.jpg" alt="...">
                            </a>
                        </div>
                        <div class="media-body">
                            <h3 class="media-heading">可乐er</h3>
                            <h4 class="media-heading">我今天太幸运啦~~~</h4>
                        </div>
                    </div>
                </li>
                <li class="list-group-item col-xs-12">
                    <span class="badge">99+</span>
                    <div class="media">
                        <div class="media-left media-middle">
                            <a href="#">
                                <img class="media-object" src="images/9.jpg" alt="...">
                            </a>
                        </div>
                        <div class="media-body">
                            <h3 class="media-heading">303宿舍群</h3>
                            <h4 class="media-heading">[群体消息]你好,我是新手!</h4>
                        </div>
                    </div>
                </li>
        </ul>
        <nav class="navbar navbar-default navbar-fixed-bottom mybottom">
            <div class="container">
                <div class="col-xs-4">
                    <span class="glyphicon glyphicon-comment"></span>
                    <span class="text">消息</span>
                </div>
                <div class="col-xs-4">
                    <span class="glyphicon glyphicon-list-alt"></span>
                    <span class="text">联系人</span>
                </div>
                <div class="col-xs-4 ">
                    <span class="glyphicon glyphicon-search"></span>
                    <span class="text">动态</span>
                </div>
            </div>
        </nav>
    </div>




</div>


</body>
<script src="../js/jquery-1.12.4.min.js"></script>
<script src="../js/bootstrap.js"></script>
</html>

 

 

引入bootstrap的框架实现
  • 4
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员玉龙

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值