简单的bootstrap的QQ应用页面

于 2022-01-04 21:15:08 发布
阅读量1k 收藏 4
点赞数 4
分类专栏： bootstrap简单应用 文章标签： bootstrap html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59732669/article/details/122311834
版权 
<!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
    评论
专栏目录
bootstrap
qq_35752802的博客
09-03 196
显示省略号（一行搞定 nice） class = “text-truncate” 盒子阴影 class=“shadow-sm” 宽度 w-25 w-50 w-75 w-100 w-auto 高度 h-25 h-50 h-75 h-100 h-auto 最大宽度 最小宽度 mh-100 mw-100 ...
Bootstrap-笔记3-组件
qq_40536676的博客
03-28 118
组件-glyphicons图标： 字体图标 ： .glyphicon .glyphicon-triangle-right 下拉菜单： 垂直+下拉按钮组：
仿QQ2016登录界面
03-16
本程序是模仿QQ2016的登录界面，并在程序启动时自动结束系统已登录的所有QQ进程，然后弹出伪QQ登录框，当输入帐号密码后点击登录时，可以自动将输入的帐号密码发送到指定游戏，模拟一个盗号木马的功能。郑重声明：本程序仅用于爱好者学习、研究与测试用，严禁用于非法途径，否则后果自负！
[代码实例][HTML][Bootstrap]仿QQ登录界面
火云的专栏
09-19 2916
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Bootstrap Demo 5</title> <meta name="viewport" conte.
nodejs + backbonejs + bootstrap实现QQ表情图列表
zeyu1021的专栏
02-04 1103
最近做一个练手的项目，模仿微信网页版，需要做一个QQ表情的列表功能。 长这个样子： 首先Nodejs获取文件夹下的图片目录，每张动态图片都要有一个原图和fix图~我在百度上面下的素材： 下面是nodejs代码，循环获取emotion下面的文件夹，然后循环文件夹下面的图片，添加到emotions中： var fs = require("fs")
bootstrap基础知识（四）－－菜单
qq_39555936的博客
07-03 439
菜单1）基本使用在使用Bootstrap框架的下拉菜单时，必须调用Bootstrap框架提供的bootstrap.js文件如果你使用的是未编译版本，在js文件夹下你能找到一个名为“dropdown.js”的文件。你也可以调用这个js文件  &lt;script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"&gt;&lt;...
Bootstrap下拉菜单
qq_27905183的博客
05-03 540
下拉菜单概述下拉菜单使用了bootstrap里的data-*属性声明式触发，将所有的数据使用最外层容器dropdown包含，按钮指定dropdown-toggle样式，并声明data-toggle属性为dropdown，下拉菜单使用dropdown-menu来包含，即可实现下拉菜单<div class="container"> <div class="dropdown"> <
bootstrap 管理页面
01-30
3. **组件**：Bootstrap包含多种预定义的UI组件，如导航栏、模态框、下拉菜单、按钮组、表单控件等，这些都可以快速应用于后台管理页面，提升界面的专业感和交互性。 4. **表格**：在后台管理页面，数据展示往往是...
bootstrap快速搭建简洁美观的页面
12-08
这个压缩包文件“动力节点蛙课网Bootstrap3”提供了一个已经设计好的美观页面，可以帮助开发者节省大量时间和精力，直接应用于自己的项目中，实现快速搭建。 Bootstrap的核心特性包括一套精心设计的CSS样式、...
bootstrap后台页面模板
09-14
Bootstrap 后台页面模板是基于流行的...总的来说，Bootstrap 后台页面模板是提高开发效率、提升后台管理界面视觉效果的有力工具，其结合 Java 后端技术，能够帮助开发者快速构建出稳定、美观且易于维护的企业级应用。
仿QQ好友列表控件（非控件拼凑）
04-01
仿QQ好友列表控件，使用代码绘制，无迟延无闪烁，非控件拼凑。
Bootstrap点击弹出QQ登录框代码.zip
07-04
Bootstrap点击弹出QQ登录框代码，点击按钮弹出QQ登录框，登录框可鼠标拖动，带关闭按钮。
qq类似聊天消息列表
11-16
类似聊天消息记录，可以很好的进行表情输入，有时间记录
js 消息提示 类似QQ的提示信息
12-14
用js ajax 写的消息提示框，可以自定义格式和内容。类似网页上的消息弹窗。
bootstrap后台页面模板2
09-14
Bootstrap 后台页面模板2是一款基于流行的前端框架Bootstrap构建的后台管理界面模板。这款模板设计简洁，功能丰富，尤其适合开发者快速构建高效、美观的后台系统。Bootstrap是Twitter推出的一个开源用于开发响应式...
bootstrap聊天界面模板,基于bootstrap响应式聊天软件,Html页面,可以用于个人聊天软件
03-06
Bootstrap内置的媒体查询和灵活的栅格系统使得实现这一目标变得简单。 3. **聊天界面**：聊天界面通常包括输入框、发送按钮、消息列表等元素。这个模板中的聊天界面可能是通过Bootstrap的组件和自定义CSS实现的，...
Bootstrap 列表
actorWen的博客
12-20 1845
Bootstrap提供了6种形式的列表，分别是：普通列表、有序列表、去点列表、 内联列表、描述列表和水平描述列表。 (1).普通列表： 普通列表的使用方式和平时的用法一致，只有一点细微的差别：列表的margin-top为0。 (2).有序列表： 有序列表也是做了一些微调，看起来比原来默认的显示柔和了一些。 (3).去点列表： 去
使用bootstrap写一个实用的注册页面
13号同学的博客
01-01 2066
功能： 1、可以查看/隐藏密码 2、校验手机号 3、发送信息60秒倒计时 准备好 jquery-1.10.2.min.js bootstrap.min.js 代码： <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <meta chars...
自定义HorizontalScrollView实现QQ消息列表效果
Android_小黑
09-04 1253
为了解决DrawerLayout侧滑只能从最右边把侧滑栏滑出来，这次上真材实料，直接自定义HorizontalScrollView来实现！完美效果！
bootstrap 页面布局
最新发布
09-02
Bootstrap页面布局是指通过使用Bootstrap框架提供的网格系统和容器来布置和组织网页内容的方法。Bootstrap的网格系统以12列为基础，可以将网页水平分为不同的栏，在不同的设备上展示不同的列数。这样的布局可以使网页在不同的设备上呈现出良好的响应式效果。 在Bootstrap中，页面布局的基本结构是使用容器（container）和行（row）进行包裹。容器用来控制列的宽度和在不同设备上的显示方式，行用来包含列，并在一行中平均分配列的宽度。列（col）则是具体的网格单元，用来放置网页内容。可以通过使用.col-*-*来指定列的宽度和在不同设备上的显示方式。 除了手动控制列的宽度和显示方式外，Bootstrap还提供了自动处理布局的方式。通过在行中只使用.col来让Bootstrap自动处理布局，会使得列自动平均分配宽度并且自动适应不同的设备。 总结来说，Bootstrap页面布局是通过使用网格系统和容器来规划和组织网页内容的方法。它可以使网页在不同设备上呈现出良好的响应式效果，提供了灵活和简单的布局方式，使开发者能够更轻松地创建出漂亮且适配不同设备的网页。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Bootstrap页面布局基础知识全面解析](https://download.csdn.net/download/weixin_38597970/12796637)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [bootstrap第二章：bootstrap布局](https://blog.csdn.net/qq_62244121/article/details/127375332)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

程序员玉龙

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

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

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

打赏作者

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

抵扣说明：

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

余额充值