本文主要是介绍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>这篇关于bootstrap之登录窗口居中布局的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
