bootstrap
发布时间 2023-04-21 16:51:27作者: 无敌大帅逼
用户登录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<link rel="stylesheet" href="/static/bootstrap-3.4.1-dist/css/bootstrap.css">
<script src="/static/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
栅栏 两边腾空
<div class="row">
row将页面分成12等分
<h1 class="text-center">用户登录</h1>
text-center居中
<div class="col-lg-6 col-md-offset-3">
co-lg-6将12等分取6份 然后col-md-offset-3往右边移动3份得到居中的效果
<form action="/login/" method="post">
<p>
username: <input type="text" class="form-control">
</p>
<p>
password: <input type="text" class="form-control">
form-control控件,可以为文本域textarea元素添加CSS定制样式。
</p>
<input type="submit" class="btn btn-success btn-block" value="登录">
btn变好看 success添加颜色 block变大
</form>
</div>
</div>
</div>
</body>
</html>