Day7利用Bootstrap框架制作简单的后台页面及登录界面
- 效果展示如下
– 登录界面
–后台界面
– 代码展示(登录界面)
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<script src="jquery-3.4.1.min.js"></script>
</head>
<style>
body {
font-family: "Microsoft YaHei";
}
#login {
width: 30%;
background: url(http://pic32.nipic.com/20130813/3347542_160503703000_2.jpg);
margin-top: 250px;
background-position:-150px -70px;
border: 1px solid #f5f5f5;
}
#login form {
padding-top: 25px;
padding-bottom: 25px;
}
.text-center h1 {
color: #FFFFFF;
}
</style>
<body>
<div id="login" class="center-block">
<div class="text-center">
<h1>一个学院管理系统</h1>
</div>
<form style="width: 300px" action="#" class="center-block">
<div class="form-group">
<label for="username">账号:</label><input type="text" class="form-control" id="username">
</div>
<div class="form-group">
<label for="password">密码:</label><input type="password" class="form-control" id="password">
</div>
<div class="row">
<input style="width: 80px" type="submit" value="登录" class="btn btn-primary col-md-6 col-md-push-4" onclick="login()">
</div>
</form>
</div>
<script>
function login() {
var username = $("#username").val()
var password = $("#password").val()
if (username == "MoYiopo" && password == 123456) {
window.location.href = "index.html";
} else {
alert("账号:MoYiopo "+"密码:123456")
}
}
</script>
</body>
</html>
– 代码展示(登录界面)
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<script src="jquery-3.4.1.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</head>
<body >
<div class="center-block" style="width: 80%">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">一个学院管理教程</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">学员管理</a></li>
<li><a href="#">教师管理</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
其他管理
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">其他1</a></li>
<li><a href="#">其他2</a></li>
<li><a href="#">其他2</a></li>
<li class="divider"></li>
</li>
</ul>
</div>
</div>
</nav>
<div>
<table class="table table-bordered table-hover">
<thead>
<tr>
<td>学号</td>
<td>姓名</td>
<td>班级</td>
<td>学院</td>
<td>管理</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>陌陌</td>
<td>102</td>
<td>xx学院</td>
<td>
<button type="button" class="btn btn-danger">删除</button>
<button type="button" class="btn btn-default">修改</button>
<button type="button" class="btn btn-primary">编辑</button>
</td>
</tr>
<tr>
<td>1</td>
<td>陌陌</td>
<td>102</td>
<td>xx学院</td>
<td>
<button type="button" class="btn btn-danger">删除</button>
<button type="button" class="btn btn-default">修改</button>
<button type="button" class="btn btn-primary">编辑</button>
</td>
</tr>
<tr>
<td>1</td>
<td>陌陌</td>
<td>102</td>
<td>xx学院</td>
<td>
<button type="button" class="btn btn-danger">删除</button>
<button type="button" class="btn btn-default">修改</button>
<button type="button" class="btn btn-primary">编辑</button>
</td>
</tr>
<tr>
<td>1</td>
<td>陌陌</td>
<td>102</td>
<td>xx学院</td>
<td>
<button type="button" class="btn btn-danger">删除</button>
<button type="button" class="btn btn-default">修改</button>
<button type="button" class="btn btn-primary">编辑</button>
</td>
</tr>
<tr>
<td>1</td>
<td>陌陌</td>
<td>102</td>
<td>xx学院</td>
<td>
<button type="button" class="btn btn-danger">删除</button>
<button type="button" class="btn btn-default">修改</button>
<button type="button" class="btn btn-primary">编辑</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>