bootstrap之登录窗口居中布局

72 阅读 0 评论 48 点赞

我是靠谱客的博主伶俐冬天，最近开发中收集的这篇文章主要介绍bootstrap之登录窗口居中布局，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

效果图

在这里插入图片描述

代码示例

<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<head>
    <meta charset="utf-8">
    <title>login</title>
    <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .row-center{
            text-align:center;
            margin-top: 120px;
        }
        .col-center {
            display:inline-block;
            float:none;
            text-align:left;
        }
    </style>
</head>
<body  >
<div class="container">
    <div  class="row  row-center" >
        <div  class="col-center">
            <div id="loginui" style="background-color: darkseagreen; padding: 28px;border-radius: 8px;border-color: #00a3ff;border-width: 2px  ">
                <div style="height: 80px;">
                    <h3 style="text-align: center;color: darkolivegreen; font-size: 35px;">登录中心</h3>
                </div>
                <div  class="form-group">
                    <input name="username" class="form-control uname" id="s_ic_no" placeholder="请输入您的用户名">
                </div>

                <div style="padding: 1px" class="form-group">
                    <input name="password" type="password" class="form-control pword m-b" id="password" placeholder="请输入您的密码">
                </div>
                <div class="submit">
                    <button style="border-radius:8px; background-color: #00A3FF" onclick="login()" class="btn btn-lg  btn-login btn-block">登录</button>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>