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

1<link href="/static/login/css/overall.css" rel="stylesheet"> 2<link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 3 4<script src="/static/bootstrap/js/bootstrap.min.js"></script> 5<script src="/static/bootstrap/jquery-3.4.1.js"></script> 6<script src="/static/bootstrap/popper.js"></script> 7 8

到此我们就可以愉快的开始使用Bootstrap啦

4.美化表单
由于django项目中表单是由forms.py构成的,因此我们要美化表单需要修改一下forms.py:

1from django import forms 2 3 4class loginform(forms.Form) : 5 username = forms.CharField(label="用户名", max_length=128,widget=forms.TextInput(attrs={'class':'form-control form-control-lg','placeholder':'用户名'})) 6 password = forms.CharField(label="密码", max_length=256, widget=forms.PasswordInput(attrs={'class':'form-control form-control-lg','placeholder':'密码'})) 7 8 9class regform(forms.Form): 10 a = (('男','男') ,('女','女')) 11 12 username = forms.CharField(label="用户名", max_length=128,widget=forms.TextInput(attrs={'class':'form-control form-control-lg','placeholder':'用户名'})) 13 password = forms.CharField(label="密码", max_length=256, widget=forms.PasswordInput(attrs={'class':'form-control form-control-lg','placeholder':'密码'})) 14 password2 = forms.CharField(label="确认密码", max_length=256, widget=forms.PasswordInput(attrs={'class':'form-control form-control-lg','placeholder':'确认密码'})) 15 phone = forms.CharField(label='电话',widget=forms.TextInput(attrs={'class':'form-control form-control-lg','placeholder':'手机'})) 16 email = forms.EmailField(label='邮箱',widget=forms.TextInput(attrs={'class':'form-control form-control-lg','placeholder':'邮箱'})) 17 sex = forms.ChoiceField(label='性别',choices=a,widget=forms.Select(attrs={"class": "custom-select custom-select-lg mb-3"})) #choices 设置元组值 18 19

用attrs相当于为input元素增加属性

5.美化html其他元素
login.html:

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <link href="/static/login/css/overall.css" rel="stylesheet"> 6 <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 7 <title>登陆</title> 8</head> 9<body> 10 11<form class="login_form" action="/sys/login/" method="post"> 12 13<h1>欢迎登陆</h1> <br> 14{% if mess%} 15<div class="alert alert-danger" role="alert"> 16 {{ mess }} 17</div> 18{% endif %} 19{% csrf_token %} 20<h2><div class="form-group"> 21{{ loginform.username}} 22</div></h2><br> 23 24<h2><div class="form-group"> 25{{ loginform.password }} 26</div></h2> 27 28<div> 29 <h2><button type="submit" class="btn btn-outline-primary btn-lg btn-block" >登陆</button></h2> 30 <a href="/sys/register/" class="float-right">注册新账户</a> 31</div> 32 33</form> 34 35 36 <script src="/static/bootstrap/js/bootstrap.min.js"></script> 37 <script src="/static/bootstrap/jquery-3.4.1.js"></script> 38 <script src="/static/bootstrap/popper.js"></script> 39</body> 40</html> 41 42

register.html:

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <link href="/static/register/css/overall.css" rel="stylesheet"> 6 <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 7 <title>Title</title> 8</head> 9<body> 10 11<form action="/sys/register/" method="post" class="register_form"> 12 <h1>欢迎注册</h1><br> 13{% if mess %} 14<div class="alert alert-danger" role="alert"> 15 {{ mess }} 16</div> 17{% endif %} 18 {% csrf_token %} 19<h2><div> 20 {{ regform.username }} 21</div></h2><br> 22 23<h2><div> 24 {{ regform.password }} 25</div></h2><br> 26 27<h2><div> 28 {{ regform.password2 }} 29</div></h2><br> 30 31<h2><div> 32 {{ regform.phone }} 33</div></h2><br> 34 35<h2><div> 36 {{ regform.email }} 37</div></h2><br> 38 39<h2><div> 40 {{ regform.sex }} 41</div></h2> 42 43 44 45<div> 46 <button type="submit" class="btn btn-outline-primary btn-lg btn-block">注册</button> 47 <a href="/sys/login/" class="float-right">直接登陆</a> 48</div> 49</form> 50 51 52 <script src="/static/bootstrap/js/bootstrap.min.js"></script> 53 <script src="/static/bootstrap/jquery-3.4.1.js"></script> 54 <script src="/static/bootstrap/popper.js"></script> 55</body> 56</html> 57 58

6.现在html的元素都进行美化了,再对元素的大小位置进行调整,编写login的css与register的css:

login:

1body { 2 background-image: url('../img/4.jpg'); 3 height: 100%; 4 width : 100%; 5 background-size:100%; 6} 7 8.login_form { 9 width: 100%; 10 height: 100%; 11 max-width: 500px; 12 margin:6cm 6cm 6cm 12cm; 13} 14 15 16form a{ 17 margin-top:20px; 18 font-size: 20px; 19} 20 21form button{ 22 margin-top:20px; 23} 24 25

register:

1body { 2 background-image: url('../img/4.jpg'); 3 height: 100%; 4 width : 100%; 5 background-size:100%; 6} 7 8.register_form { 9 width: 100%; 10 height: 100%; 11 max-width: 500px; /* 段落最大宽度*/ 12 margin:2cm 50cm 2cm 10cm; /* 外边距*/ 13} 14 15 16form a{ 17 margin-top:20px; 18 font-size: 20px; 19} 20 21form button{ 22 margin-top:20px; 23} 24 25

7.引用编写的css:
分别在两个html页面头部写入(上面的html已经含有这两条引入0.0)

1<link href="/static/login/css/overall.css" rel="stylesheet"> 2 3<link href="/static/register/css/overall.css" rel="stylesheet"> 4 5

8.看看效果啦:
在这里插入图片描述
在这里插入图片描述

结束

好了,对登陆注册页面的美化就到此结束啦!虽然美化之后也没有很出众,但是也比干枯枯黑白页面好看啦哈哈~

代码交流 2021