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

需求说明

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

运行效果
基于HTML5的移动Web应用——Bootstrap 样式案例:制作百度登录框_第1张图片

参考代码

<!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/[email protected]/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/[email protected]/dist/jquery.min.js"></script>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js'></script>
    <script>
//        默认弹出
//        $('.modal').modal();

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

超全面的测试IT技术课程,0元立即加入学习!有需要的朋友戳:


腾讯课堂测试技术学习地址

欢迎转载,但未经作者同意请保留此段声明,并在文章页面明显位置给出原文链接。

你可能感兴趣的:(移动WEB开发,前端,bootstrap,html,css)