Django+bootstrap启动登录模板页面（Django第三篇）_django 模板下载

作者：2023面试高手 | 2024-04-10 00:51:17

踩

django 模板下载

上次用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处调用）

最后一步便是修改我们的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等文件就可以套用成功了。

传送门：Django 中 a href标签使用方法跳转页面（Django第四篇）

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/395764