运用JQuery和bootstrap写一个简易的朋友圈案例。

最新推荐文章于 2024-07-04 16:37:43 发布

神秘的张某人.

最新推荐文章于 2024-07-04 16:37:43 发布

阅读量372

点赞数 6

文章标签： jquery bootstrap 前端

本文链接：https://blog.csdn.net/zhang_mou_r/article/details/138715247

版权

文章目录

前言
总结

前言

提示：这里可以添加本文要记录的大概内容：

运用JQuery和bootstrap写一个简易的朋友圈案例
在这里插入图片描述

提示：以下是本篇文章正文内容，下面案例可供参考

先插入JQuery和bootstrap

JQuery我用的是1.11版本大家可以去网上下载下来。
在这里插入图片描述

1.先写一个朋友圈的输入框。

在这里插入图片描述
下面展示一些 内联代码片。

    <style>
         textarea.sendText{
			height: 200px;
		}
        .avatar{
            width: 50px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-lg-offset-3  col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
              //输入框
                <div class="form-group">
                    <textarea class="form-control sendText"></textarea>
                </div>
                //发送按钮
                <button class="btn btn-warning send">发送</button>
                <hr>
             </div>
        </div>
    </div>
</body>

2.搭建发送内容样式

代码如下（示例）：
在这里插入图片描述
下面展示一些 内联代码片。

<style>
       textarea.sendText{
			height: 200px;
		}
        .avatar{
            width: 50px;
        }
        .opa{
			font-size: 20px;
			color:#F0AD4E ;
            margin-right: 10px;
		}
        .panel-footer{
			display: flex;
			justify-content: flex-end;
           
		}
        .btn{
            border: none;
        }
    </style>

		 <div class="list">
                   <div class="panel panel-warning">
                        <div class="panel-heading">
                        //插入图片头像。
                            <img src="../img/卡通头像 (1).png" alt="" class="avatar">
                            //昵称
                            <span class="text-warning">神秘的张某人</span>
                            右上角的小×号
                            <button class="close"><span>&times;</span></button>
                        </div>
                        //发送出来的内容。
                        <div class="panel-body">
                            <p>今天下雨了</p>
                        </div>
                        //下面的字体图标
                        <div class="panel-footer">
							<span class="glyphicon glyphicon-heart-empty opa"></span>
							<span class="glyphicon glyphicon-comment opa"></span>
							<span class="glyphicon glyphicon-pencil opa"></span>
						</div>
                    </div> 
                </div>