bootstrap模仿发布微博表情图片文字响应式页面效果代码
代码语言：html
所属分类：响应式
代码描述：bootstrap模仿发布微博表情图片文字响应式页面效果代码
代码标签： bootstrap 模仿 发布 微博 表情 图片 文字 响应式 页面
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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>bootstrap仿文博页面样式</title>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
<style>
body{
font-family: tahoma,"microsoft yahei";
}
.navbar-right a{
color: #444
}
.navbar-header{
padding-left:140px;
padding-right: 50px;
font-weight: bold;
}
.btn_search{
position: relative;
left:-28px;
cursor: pointer;
}
.my_edit{
margin-top:80px;
}
#edit_form{
background: #fff;
padding-bottom: 8px;
border-radius: 3px;
border: 1px solid #eee;
}
.container_bg{
background: #dd6572;
background-color:rgba(255, 255, 255, 0.5);
padding-bottom: 30px;
}
#content{
height:95px;
border-style:solid;
border-width:1px;
border-color:#AEEEEE}
#content img{
}
.emoji{
background: url(//repo.bfw.wiki/bfwrepo/images/face/1/face.png) no-repeat;
padding:1px 0 10px 25px;
cursor: pointer;
font-size: 13px;
}
.pic{
background: url(//repo.bfw.wiki/bfwrepo/images/face/1/pic.png) no-repeat;
margin-left: 10px;
padding:1px 0 10px 25px;
cursor: pointer;
font-size: 13px;
}
.myEmoji{
background: #fff;
padding: 15px;
border-radius: 3px;
border: 1px solid #eee;
box-shadow: 0 4px 20px 1px rgba(0,0,0,0.2);
position:absolute;
top:40px;
z-index: 9999;
display: none
}
.myEmoji img{
border: 1px solid #ccc;
padding: 4px;
}
#send{
margin-top:-5px ;
background: #e0620d;
color: #fff;
padding: 8px 30px
}
.message{
background:#fff;
height: 100%;
margin-top:5px;
border: 1px solid #eee;
padding :15px;
}
.msg_content{
margin-top:10px;
}
.sort{
color:#777;
}
.part_right{
margin-top: 80px;
padding-left: 20px;
}
.inform{
background: #fff;
border-radius: 3px;
border: 1px solid #eee;
}
.inform img{
border-radius: 50%;
width: 80px;
height: 80px;
margin-top: 20px;
}
.my_inform{
padding: 10px;
}
.item_hot{
padding: 10px 20px
}
.item_num{
color: #999
}
.mypic{
margin-top:5px;
width: 100%;
height: 200px;
}
.mypic:hover{
cursor:url('//repo.bfw.wiki/bfwrepo/images/face/1/enlarge.png'),auto;
}
.part_hot{
background: #fff;
margin-top:5px;
border: 1px solid #eee;
}
@media screen and (max-width: 699px) and (min-width: 320px) {
.my_edit{
margin-top:160px;
}
.item_hot{
font-size: 12px;
}
.part_right{
margin-top: 10px;
padding-left: 0px;
}
.btn_search{
padding: 0px;
}
.navbar-header{
padding:0;
}
.item_hot{
padding: 15px 25px
}
.inform{
padding-bottom: 15px;
}
}
</style>
</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="//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" class="col-sm-2 col-xs-2" style="border-radius: 50%">
<div class="col-sm-10 col-xs-10">
<span style="font-weight: .........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0