Django框架使用Bootstrap美化登陆注册页面
背景
昨天写的登陆注册页面只把功能实现完，还没有对页面进行美化，那么今天我们就完成昨天的任务！
一、思路
使用现在比较流行的前端框架Bootstrap，外加自己写的一点点css来进行美化！
一般都是下载框架，导入，引用，美化。
二、实现
1.下载Bootstrap4
https://v4.bootcss.com/docs/getting-started/download/
由于Bootstrap4需要jquery与popper以来，所以还要把下面的js文件下载下来（直接打开另存为即可）
https://cdn.bootcss.com/jquery/3.4.1/jquery.js
https://cdn.bootcss.com/popper.js/1.15.0/umd/popper.js
2.将框架导入项目中
在django app下创建一个static的文件夹用于放置我们的静态文件，如果要将static建在其他地方也可以，但是同时要配置setting.py
我app中static文件目录如下，login与register是用来放置两个页面的css与图片：
3.引用
在html文件中引用css与js文件，例如我的login.html
<link href="/static/login/css/overall.css" rel="stylesheet">
<link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/bootstrap/jquery-3.4.1.js"></script>
<script src="/static/bootstrap/popper.js"></script>
到此我们就可以愉快的开始使用Bootstrap啦
4.美化表单
由于django项目中表单是由forms.py构成的，因此我们要美化表单需要修改一下forms.py：
from django import forms
class loginform(forms.Form) :
username = forms.CharField(label="用户名", max_length=128,widget=forms.TextInput(attrs={'class':'form-control form-control-lg','placeholder':'用户名'}))
password = forms.CharField(label="密码", max_length=256, widget=forms.PasswordInput(attrs={'class':'form-control form-control-lg','placeholder':'密码'}))
class regform(forms.Form):
a = (('男','男') ,('女','女'))
username = forms.CharField(label="用户名", max_length=128,widget=forms.TextInput(attrs={'class':'form-control form-control-lg','placeholder':'用户名'}))
password = forms.CharField(label="密码", max_length=256, widget=forms.PasswordInput(attrs={'class':'form-control form-control-lg','placeholder':'密码'}))
password2 = forms.CharField(label="确认密码", max_length=256, widget=forms.PasswordInput(attrs={'class':'form-control form-control-lg','placeholder':'确认密码'}))
phone = forms.CharField(label='电话',widget=forms.TextInput(attrs={'class':'form-control form-control-lg','placeholder':'手机'}))
email = forms.EmailField(label='邮箱',widget=forms.TextInput(attrs={'class':'form-control form-control-lg','placeholder':'邮箱'}))
sex = forms.ChoiceField(label='性别',choices=a,widget=forms.Select(attrs={"class": "custom-select custom-select-lg mb-3"})) #choices 设置元组值
用attrs相当于为input元素增加属性
5.美化html其他元素
login.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="/static/login/css/overall.css" rel="stylesheet">
<link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<title>登陆</title>
</head>
<body>
<form class="login_form" action="/sys/login/" method="post">
<h1>欢迎登陆</h1> <br>
{% if mess%}
<div class="alert alert-danger" role="alert">
{{ mess }}
</div>
{% endif %}
{% csrf_token %}
<h2><div class="form-group">
{{ loginform.username}}
</div></h2><br>
<h2><div class="form-group">
{{ loginform.password }}
</div></h2>
<div>
<h2><button type="submit" class="btn btn-outline-primary btn-lg btn-block" >登陆</button></h2>
<a href="/sys/register/" class="float-right">注册新账户</a>
</div>
</form>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/bootstrap/jquery-3.4.1.js"></script>
<script src="/static/bootstrap/popper.js"></script>
</body>
</html>
register.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="/static/register/css/overall.css" rel="stylesheet">
<link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<title>Title</title>
</head>
<body>
<form action="/sys/register/" method="post" class="register_form">
<h1>欢迎注册</h1><br>
{% if mess %}
<div class="alert alert-danger" role="alert">
{{ mess }}
</div>
{% endif %}
{% csrf_token %}
<h2><div>
{{ regform.username }}
</div></h2><br>
<h2><div>
{{ regform.password }}
</div></h2><br>
<h2><div>
{{ regform.password2 }}
</div></h2><br>
<h2><div>
{{ regform.phone }}
</div></h2><br>
<h2><div>
{{ regform.email }}
</div></h2><br>
<h2><div>
{{ regform.sex }}
</div></h2>
<div>
<button type="submit" class="btn btn-outline-primary btn-lg btn-block">注册</button>
<a href="/sys/login/" class="float-right">直接登陆</a>
</div>
</form>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/bootstrap/jquery-3.4.1.js"></script>
<script src="/static/bootstrap/popper.js"></script>
</body>
</html>
6.现在html的元素都进行美化了，再对元素的大小位置进行调整，编写login的css与register的css：
login：
body {
background-image: url('../img/4.jpg');
height: 100%;
width : 100%;
background-size:100%;
}
.login_form {
width: 100%;
height: 100%;
max-width: 500px;
margin:6cm 6cm 6cm 12cm;
}
form a{
margin-top:20px;
font-size: 20px;
}
form button{
margin-top:20px;
}
register：
body {
background-image: url('../img/4.jpg');
height: 100%;
width : 100%;
background-size:100%;
}
.register_form {
width: 100%;
height: 100%;
max-width: 500px; /* 段落最大宽度*/
margin:2cm 50cm 2cm 10cm; /* 外边距*/
}
form a{
margin-top:20px;
font-size: 20px;
}
form button{
margin-top:20px;
}
7.引用编写的css：
分别在两个html页面头部写入（上面的html已经含有这两条引入0.0）
<link href="/static/login/css/overall.css" rel="stylesheet">
<link href="/static/register/css/overall.css" rel="stylesheet">
8.看看效果啦：
结束
好了，对登陆注册页面的美化就到此结束啦！虽然美化之后也没有很出众，但是也比干枯枯黑白页面好看啦哈哈~