bootstrap模仿发布微博表情图片文字响应式页面效果代码-html代码-BFW代码库

代码语言：html

所属分类：响应式

代码描述：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>&nbsp;&nbsp;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="ma.........完整代码请登录后点击上方下载按钮下载查看