基于HTML5的移动Web应用——Bootstrap 样式案例：制作百度登录框

最新推荐文章于 2023-06-26 21:07:48 发布

sem00000

最新推荐文章于 2023-06-26 21:07:48 发布

阅读量3k

点赞数 6

分类专栏：移动WEB开发前端文章标签： bootstrap html css

本文链接：https://blog.csdn.net/sem00000/article/details/106094645

版权

前端同时被 2 个专栏收录

16 篇文章 5 订阅

订阅专栏

移动WEB开发

14 篇文章 0 订阅

订阅专栏

需求说明

使用模态框布局登录框的页面结构和样式
使用栅格系统布局登录的表单内容
通过点击“登录”按钮触发弹出登录框。并且弹出的登录框是小型的

运行效果
在这里插入图片描述

参考代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>百度登录框</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"/>
    <style>
        body{
            padding: 30px;
        }
        .myMP{
            margin: 20px;
        }
        .myB{
            margin-bottom: 20px;
        }
        .myBtn{
            margin-left: 80%;
        }
    </style>
</head>

<body>
<!--按钮-->
<button class="btn btn-primary myBtn" data-toggle="modal" data-target="#mymodal">登录</button>

<div class="container" style="margin-top: 40px">
    <div class="row">
        <div class="col-md-6 col-md-offset-3" >
            <div class="input-group">
                <input type="text" class="form-control" placeholder="" >
                    <span class="input-group-btn" >  <!-- 容易出错点：写成input-group-addon-->
                        <button class="btn btn-primary" type="button">百度一下</button>
                    </span>
            </div>
        </div>
    </div>
</div>

<!--弹出的模态框-->
    <div id="mymodal" class="modal fade bs-examlpe-modal-sm"><!-- modal固定布局，上下左右都是0表示充满全屏，支持移动设备上使用触摸方式进行滚动。。-->
        <div class="modal-dialog modal-sm"><!-- modal-dialog默认相对定位，自适应宽度，大于768px时宽度600，居中-->
            <div class="modal-content"><!-- modal-content模态框的边框、边距、背景色、阴影效果。-->
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">登录百度账号</h4>
                </div>
                <div class="media-body">
                    <form action="#">
                        <div class="col-md-10 col-md-offset-1 myMP">
                            <input class="form-control" type="text" placeholder="手机/邮箱/用户名"/>
                        </div>
                        <div class="col-md-10 col-md-offset-1 myMP">
                            <input class="form-control" type="text" placeholder="密码"/>
                        </div>
                        <div class="col-md-10 col-md-offset-1 myMP">
                            <input type="checkbox" />下次自动登录
                        </div>
                        <div class="col-md-12 myB">
                            <input class="btn btn-primary form-control" type="submit" value="登录"/>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                </div>
            </div>
        </div>

    </div>

<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js'></script>
    <script>
//        默认弹出
//        $('.modal').modal();

    </script>
</body>
</html>