<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />
<title>demo2</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-fixed-top" role="navigation" style="background: #e0620d ;padding-top: 3px;height:50px;">
<div class="container-fluid" style="background: #fff;">
<div class="navbar-header ">
<span class="navbar-brand " href="#">WEIBO</span>
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#my-navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="#热门话题#">
<i class="glyphicon glyphicon-search btn_search" ></i>
<!-- <button type="submit" class="btn btn-default">提交</button> -->
</div>
</form>
<div class="collapse navbar-collapse" id="my-navbar-collapse">
<ul class="nav navbar-nav navbar-right" >
<li ><a href="#"><i class="glyphicon glyphicon-user"></i> Jack.C</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
设置 <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
</ul>
</li>
</ul>
</div>
</div>
<hr style="margin: 0;padding: 0;color:#222;width: 100%">
</nav>
<div class="container container_bg" >
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-6 col-xs-12 my_edit" >
<div class="row" id="edit_form" >
<span class="pull-left" style="margin:15px;">编写新鲜事</span>
<span class="tips pull-right" style="margin:15px;"></span>
<form role="form" style="margin-top: 50px;">
<div class="form-group">
<div class="col-sm-12">
<div contentEditable="true" id="content" class="form-control " ></div>
</div>
<div class="col-sm-12" style="margin-top: 12px;">
<span class="emoji" >表情</span>
<span class="pic" >图片 </span>
<span>
<input type="file" name="" class="select_Img" style="display: none" >
<img class="preview" src="">
</span>
<div class="myEmoji" >
<ul id="myTab" class="nav nav-tabs">
<li class="active">
<a href="#set" data-toggle="tab">
预设
</a>
</li>
<li><a href="#hot" data-toggle="tab">热门</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="set">
<div class="emoji_1"></div>
</div>
<div class="tab-pane fade" id="hot">
<div class="emoji_2"></div>
</div>
</div>
</div>
<!-- <span> <input type="file" id="selectImg" value=""></input> </span> -->
<button type="button" id="send" class="btn btn-default pull-right disabled">发布</button>
</div>
</div>
</form>
</div>
<div class="row item_msg" >
<div class="col-sm-12 col-xs-12 message" >
<img src="img/icon.png" class="col-sm-2 col-xs-2" style="border-radius: 50%">
<div class="col-sm-10 col-xs-10">
<span style="font-weight: bold;">Jack.C</span>
<br>
<small class="date" style="color:#999">1分钟前</small>
<div class="msg_content">happy day!
<img class="mypic" src="img/bg_1.jpg" >
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 part_right" >
<div class="row text-center inform">
<img src="img/icon.png" >
<h4 style="font-weight: bold;">Jack.C</h4>
<div class="col-sm-12 my_inform" >
<div class="col-sm-4 col-xs-4">
<div>111</div>
<div class="sort">关注</div>
</div>
<div class="col-sm-4 col-xs-4">
<div>111</div>
<div class="sort">粉丝</div>
</div>
<div class="col-sm-4 col-xs-4">
<div>111</div>
<div class="sort">博客</div>
</div>
</div>
</div>
<div class="row part_hot" >
<div class="col-sm-12">
<span class="pull-left" style="padding: 10px;font-size:16px;font-weight: bold;">热门话题</span>
<span class="pull-right" style="padding: 10px;">换话题</span>
</div>
<hr style="margin: 0;padding: 0;width: 100%">
<div class="col-sm-12 item_hot" >
<span class="pull-left">#英雄联盟s7#</span>
<span class="pull-right item_num">34.6亿</span>
</div>
<div class="col-sm-12 item_hot" >
<span class="pull-left">#今天霜降#</span>
<span class="pull-right item_num">2.6亿</span>
</div>
<div class="col-sm-12 item_hot" >
<span class="pull-left">#亚洲新歌榜#</span>
<span class="pull-right item_num">10.4亿</span>
</div>
<div class="col-sm-12 item_hot" >
<span class="pull-left">#扑通扑通少女心#</span>
<span class="pull-right item_num">1.5亿</span>
</div>
<div class="col-sm-12 item_hot" >
<span class="pull-left">#突然开心#</span>
<span class="pull-right item_num">1.1亿</span>
</div>
<hr style="margin: 0;padding: 0;width: 100%">
<div class="col-sm-12 text-center" style="padding: 10px"><a href="#">查看更多</a></div>
</div>
</div>
</div>
</div>
<script src="js/jquery-3.1.0.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
$("#content").keyup(function(){
//判断输入的字符串长度
var content_len = $("#content").text().replace(/\s/g,"").length;
$(".tips").text("已经输入"+content_len+"个字");
if(content_len==0){
// alert(content);
$(".tips").text("");
$("#send").addClass("disabled");
return false;
}else{
$("#send").removeClass("disabled");
}
});
$(".pic").click(function(){
$(".select_Img").click();
})
// function confirm(){
// var r= new FileReader();
// f=$(".select_Img").files[0];
// r.readAsDataURL(f);
// r.onload=function(e) {
// $(".preview").src=this.result;
// };
// }
//点击按钮发送内容
$("#send").click(function(){
// var myDate = new Date();
//
没有合适的资源?快使用搜索试试~ 我知道了~
JQ+bootstrap仿微博编辑页面
共138个文件
png:123个
js:4个
css:4个
5星 · 超过95%的资源 需积分: 17 36 下载量 92 浏览量
2017-10-25
21:06:43
上传
评论 5
收藏 1.29MB ZIP 举报
温馨提示
可统计字数,发送表情,放大图片,添加编辑的内容,bootstrap响应式布局
资源推荐
资源详情
资源评论
收起资源包目录
JQ+bootstrap仿微博编辑页面 (138个子文件)
bootstrap.css 134KB
bootstrap.min.css 98KB
css.css 3KB
style.css 2KB
glyphicons-halflings-regular.eot 20KB
index.html 11KB
bg.jpg 366KB
bg_1.jpg 57KB
jquery-3.1.0.js 258KB
bootstrap.js 64KB
bootstrap.min.js 28KB
animate.js 468B
icon.png 36KB
f14.png 8KB
f41.png 8KB
f58.png 8KB
f19.png 8KB
h10.png 8KB
f4.png 8KB
f47.png 8KB
f26.png 8KB
f16.png 7KB
h34.png 7KB
f7.png 7KB
f18.png 7KB
f23.png 7KB
f32.png 7KB
h25.png 7KB
f37.png 7KB
h48.png 7KB
h52.png 7KB
f30.png 7KB
f31.png 7KB
h32.png 7KB
h27.png 7KB
h15.png 7KB
f29.png 7KB
h53.png 6KB
f52.png 6KB
f40.png 6KB
f21.png 6KB
h41.png 6KB
f34.png 6KB
f17.png 6KB
h17.png 6KB
f56.png 6KB
f28.png 6KB
h60.png 6KB
f53.png 6KB
f54.png 6KB
h20.png 6KB
h56.png 6KB
f2.png 6KB
h58.png 6KB
h46.png 6KB
f49.png 6KB
h33.png 6KB
f22.png 6KB
h36.png 6KB
h6.png 6KB
f43.png 6KB
f59.png 6KB
f5.png 6KB
h31.png 6KB
f15.png 6KB
h55.png 6KB
f42.png 6KB
f44.png 6KB
f48.png 6KB
f33.png 6KB
f20.png 6KB
f50.png 6KB
f46.png 6KB
h23.png 6KB
f12.png 6KB
h47.png 6KB
f25.png 6KB
f27.png 6KB
h54.png 5KB
f6.png 5KB
f51.png 5KB
f8.png 5KB
f38.png 5KB
h11.png 5KB
f11.png 5KB
h59.png 5KB
f39.png 5KB
f9.png 5KB
f55.png 5KB
f45.png 5KB
f3.png 5KB
f57.png 5KB
h3.png 5KB
f35.png 5KB
h57.png 5KB
f10.png 5KB
f1.png 5KB
h40.png 5KB
h24.png 5KB
h14.png 5KB
共 138 条
- 1
- 2
资源评论
- forcoming2018-11-20很好的资源,有用
weixin_38547256
- 粉丝: 0
- 资源: 1
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功