一、效果图
二、代码部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="assets/jquery-3.5.1.min.js"></script>
<script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="assets/vue.min-v2.5.16.js"></script>
<script src="assets/vue-router.min-2.7.0.js"></script>
<script src="assets/axios.min.js"></script>
</head>
<body>
<div class="container" id="app">
<div class="row">
<div class="col-md-6 col-md-offset-3" style="height: 410px;border: 1px solid black;margin-top: 80px; border-radius: 8px; ">
<div class="row">
<!-- 登录-->
<div class="col-md-12" style="text-align: center;font-size: 50px;font-weight: bold;margin-top: 50px;">
登录
</div>
</div>
<div class="row" style="height: 60px;font-size: 20px;margin-top: 20px">
<div class="col-md-6 col-md-offset-3">
<label>用户名</label>
<input type="text" class="form-control" />
</div>
</div>
<!-- div bootstrap行-->
<div class="row" style="height: 60px;font-size: 20px;margin-top: 20px">
<div class="col-md-6 col-md-offset-3">
<label>密码</label>
<input type="password" class="form-control" />
</div>
</div>
<div class="row" style="height: 60px;margin-bottom: 20px;margin-top: 40px">
<div class="col-md-8 col-md-offset-2" style="text-align: center">
<button class="btn btn-primary" style="margin-right: 8px;" >登录</button>
<button class="btn btn-default" >重置</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
方便大家使用和调用,节省代码时间