python+Django+bootstrap启动登录模板页面

上次用Django启动了我的第一个页面

在这里插入图片描述

具体步骤参考:初步启动Django
Django启动第一个页面
但是页面非常简陋,所以我从网上找了个模板,下载网址:免费下载模板,解压后内部文件如下:
在这里插入图片描述效果图:
在这里插入图片描述
下面开始将这个模板页面移入我们的Django:

首先下载bootstrap

下载地址:bootstrap下载地址,选择第二个下载:
在这里插入图片描述
解压后效果如下:
在这里插入图片描述

接下来对我们的Django项目进行改动

找到Django项目的创建位置(我的是在D盘):
在这里插入图片描述
在Django项目中创建一个名为static的文件夹
在这里插入图片描述
在static内创建一个boostrap文件夹:
在这里插入图片描述

接下来打开刚刚下载的bootstrap-3.3.7文件夹,找到dist内的三个文件夹

在这里插入图片描述

将这三个文件夹放入我们上一步在Django项目内创建的bootstrap文件夹内
在这里插入图片描述

接下来将模板移入Django项目中:

打开我们在网上下载的模板文件夹
在这里插入图片描述

html里的美观样式要用到上面四个文件里的css,js等文件,我们要做的就是在html文件放入Django后仍能调用这些文件
在这里插入图片描述对比模板文件以及我们创建的bootstrap文件,将模板文件中的img文件夹,vendor文件夹复制到bootstrap文件夹中,将login.html,register.html放入Django项目中的模板文件夹下
在这里插入图片描述
我的Django项目中模板文件夹命名是html,一般名是template

再将网上下载的模板文件夹中的css和js里的文件分别放入django项目中我们创建的bootstrap文件夹下的css,js里,至此我们已将模板中的全部内容迁移至我们的Django项目中了,剩下的就是对项目中的一些文件内容进行修改

在这里插入图片描述

打开pycharm,找到settings.py文件,对如下内容修改
在这里插入图片描述

这样项目中如果要用到静态文件就会自动到static和css文件夹下查找(css是我之前尝试调用静态文件是创立的,此处有些多余了,要用css文件可以直接到/static/bootstrap/css处调用)

扫描二维码关注公众号,回复: 11101009 查看本文章

最后一步便是修改我们的login.html文件中的调用部分了

打开,找到调用部分的代码:
在这里插入图片描述
其中调用的bootstrap.min.css和style.default.css都是模板文件夹中前四个文件夹里的文件,现在已被我们放入static/bootstrap文件夹中了
在这里插入图片描述
我们将代码改为如下:
在这里插入图片描述

再找找login.html文件中其他的调用部分:
在这里插入图片描述

其中下面两个好修改,在我们的static/bootstrap中都有相关文件,修改后如下:
在这里插入图片描述

但第一个是网页调用,我们暂时没有这个文件,打开这个网页如下:
在这里插入图片描述
我们CTRL+A,复制所有内容,然后在static/bootstrap/js下创建一个jquery.min.js文件。将网页内容粘贴进去
在这里插入图片描述
最后再改一下调用即可
在这里插入图片描述
启动python项目,查看效果:
在这里插入图片描述
在这里插入图片描述
成功啦

如果我的模板下载连接失效,其他模板也是一样的操作。能让项目内的html可以成功调用css,js等文件就可以套用成功了。

发布了20 篇原创文章 · 获赞 3 · 访问量 1144

猜你喜欢

转载自blog.csdn.net/qq_38175040/article/details/104654254