使用bootstrap框架实现简单登录页面

登录注册

水音铃铛

9107人浏览 · 2022-07-20 11:15:15

水音铃铛 · 2022-07-20 11:15:15 发布

在这里插入图片描述实现思路：从上到下，从左到右
一开始没想到怎么实现的是验证码和图片那里，实现验证码和图片那一块的布局还是一个input控件和一张图片，使用bootstrap里的input控件默认情况下，是占一行的。
<div class="form-group"> <label for="exampleInputPassword1">密码</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码"> </div>
去掉form-control就不占一行了，具体实现代码如下：

<div class="form-group">
                       <label for="code">验证码</label>
                       <!--加了form-control input独占一行-->
                       <div><input type="text" id="code" placeholder="请输入验证码..." style="width:55%; float:left;height:55px">
                           <img src="../boot/imgs/aa.jpg" alt="11" style="width:220px; height:55px; float:right"></div>
                   </div>
                   <div class="clearfix"></div>
                   <button class="btn btn-danger col-sm-6" style="margin-top:10px;">登录</button>
                   <button class="btn btn-info col-sm-4 col-sm-offset-2" style="margin-top:10px">注册账号</button>

登录页面代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <!--引入bootstrap核心样式-->
    <link rel="stylesheet" href="../boot/css/bootstrap.min.css">
    <!--引入jquery核心js文件-->
    <script src="../boot/js/jquery-3.5.1.min.js"></script>
    <!--引入bootstrap核心js文件-->
    <script src="../boot/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-sm-offset-3">
                <h1 class="text-center" style="margin-top:70px">用户登录</h1>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6 col-sm-offset-3">
                <form>
                    <div class="form-group">
                        <label for="exampleInputEmail1">用户名：</label>
                        <input type="text" class="form-control" id="exampleInputEmail1" placeholder="用户名">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">密码</label>
                        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
                    </div>
                    <div class="form-group">
                        <label for="code">验证码</label>
                        <!--加了form-control input独占一行-->
                        <div><input type="text" id="code" placeholder="请输入验证码..." style="width:55%; float:left;height:55px">
                            <img src="../boot/imgs/aa.jpg" alt="11" style="width:220px; height:55px; float:right"></div>
                    </div>
                    <div class="clearfix"></div>
                    <button class="btn btn-danger col-sm-6" style="margin-top:10px;">登录</button>
                    <button class="btn btn-info col-sm-4 col-sm-offset-2" style="margin-top:10px">注册账号</button>
                </form>
            </div>

        </div>

    </div>
</body>
</html>