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.........完整代码请登录后点击上方下载按钮下载查看