2023-05-16 | Django World | Django Crispy Forms with Bootstrap 5

Django Crispy Forms与Bootstrap 5 表单开发实战指南

媒体详情

上传日期
2025-06-27 09:55
来源
https://www.youtube.com/watch?v=P20H63Eq9o4
处理状态
已完成
转录状态
已完成
Latest LLM Model
gemini-2.5-pro

转录

下载为TXT
speaker 1: Hello everyone, I am your spiand. Welcome to my channel and go. So in today's video we are going to see Jango crispy poms with bootstep file. Okay, now I'll go to the browser and I'll just grab this code. Okay, I say git loand paste that url. Now again, I'll just copy all these files. I will select all these files and drag and drop outside of the folder. Now I'll just delete this one now. Now Press Ctrl and select this folder receive under scbootshop under scfree and also select this manager qfile and Redon't delete. Okay, now here we can say then go hyphadmin that. And we can say brisky. Let's what's have this five and use space and write dot and hit enter. Now the project has been created, so let's go to the settings row two fi. Now again, we will follow the same step which we have followed in prevideo till I install the app, which is name main. Then I'll go down and here I'll write templace and I'll go to urls. Here I'll import to and taket. No. Next include and url save part, and I will say includes, and here I can write main dot urls my, so once this .
speaker 2: is done.
speaker 1: we can now initiate command, which will be Python manage or pi. Okay, so in again I misstyled the styling I guess with .
speaker 2: mean .
speaker 1: all right, my great. What's wrong with this? Okay, I me sell the spling over here. Me now it would work fine. Yeah it work then I will say five and minit or sty何最割the road is up and running。 I will just go ahead and get the url exploting point. Let me go to the login. Now the user, okay.
speaker 2: we have not installed .
speaker 1: the crstic form that why is showing the text anything like this? But we will go to can go restiform.
speaker 2: click on the link.
speaker 1: click on installation, and we will click on. Nothing. Nothing .
speaker 2: the same .
speaker 1: the crform would help by its on GitHub. I'll just leave this link in the comment below. Okay you don't worry about that alright now just copy this command from over here stop the server and like clear command and I .
speaker 2: just you .
speaker 1: on package has been installed so if I come over here and hit fresh sh it should work. Let me understand what first. Yeah. Okay, it is not working. Let us see what are the new configurations? So I'll just pocket this one. Go to via code. Okay, we have not installed the app. That's why it's not working. I guess now it should work .
speaker 2: well. No.
speaker 1: it is that easy. If that has no attribute, chase plso temperature. So back. Okay, I need to install it. I mean, I need to copy and paste both lines here. I will just write formand and say, what's that? 52 is being down. Take that one. Come over here. Refresh now. It is working. Okay, I don't know why.
speaker 2: but due to some reasons.
speaker 1: this message is shown above overthebut. I don't know why, but if I go to register. Close that one else. Let's .
speaker 2: say cash .
speaker 1: use the one plus two the .
speaker 2: one .
speaker 1: that main of is first one to one right main. Okay, you can see .
speaker 2: we got the .
speaker 1: error message and let me check in desorhtml here. We have bootstrafile over here. Okay, so I guess okay I realized my mistake so let me click over here. Here. Okay, I by mistake I just selected bootstrafive but if you are watching this video, I mean obviously will not go for bootstrathree, but please if you are watching this video for this code is this link and please make a porequest. I'll will just moit. Okay, thank you for that. Alright, so our workstratype is also now working fine. Alright, so what we can do there now over here, I'll just create an account. I mean whether that is first 20 to one and mean whether that is first 21. Okay, click on submit. Okay, so we are logged in. It means our account has been created. I'll just log out, be logged out. Alright, so this is also working properly. Fine. Alright, so what we are going to do in the next video, let me show you. I'll simply write Jango percform. Now here I'll just basically install this crispy forms package. Okay? And we will follow this documentation and okay, we are left with telwind css. Yeah, we need to cover that though. So in that video we will cover telwind css and then we will move on. So Yeah, this is it for today's video. Guys, if you like my video, please like share, subscribe to my channel and I will see you in the next one. Thank you.

最新摘要 (详细摘要)

生成于 2025-06-27 09:59

Django Crispy Forms与Bootstrap 5 表单开发实战指南

资源链接
* GitHub 示例代码: https://github.com/yashpatel-py/django_crispy_bootstrap_4
* Crispy Forms Bootstrap 5 支持: https://github.com/django-crispy-forms/crispy-bootstrap5

核心摘要

本视频教程详细演示了如何在 Django 项目中集成 Crispy Forms 库并结合 Bootstrap 5 框架美化表单。教程从项目初始化入手,涵盖了克隆 GitHub 仓库、创建 Django 项目、配置 settings.pyurls.py 等基础步骤。核心内容聚焦于 Crispy Forms 的安装与故障排除过程,强调了解决表单样式问题的关键在于:不仅需要通过 pip 安装相关包,还必须在 settings.pyINSTALLED_APPS 中正确添加 crispy_formscrispy_bootstrap5,并指定模板包。教程通过完整的用户注册、登录和登出流程验证了集成的有效性,为开发者提供了实用的操作指南和调试经验。


项目初始化与基础配置

教程首先介绍了集成前的项目准备工作。

  • 代码与项目创建:
    1. 使用 git clone 命令从 GitHub 获取基础项目代码。
    2. 通过 django-admin startproject crispy . 命令在当前目录创建新的 Django 项目。
  • 应用与URL配置:
    1. settings.pyINSTALLED_APPS 列表中注册名为 main 的应用。
    2. 在项目主 urls.py 文件中,使用 include() 函数将根 URL 路径('')转发至 main.urls 模块进行处理。

Crispy Forms 安装与故障排除

此部分详细展示了集成 Crispy Forms 的过程,并结构化地解决了遇到的问题。

  • 问题识别: 启动服务器后,访问登录页面发现表单仅为纯文本,未应用任何 CSS 样式。
  • 解决步骤:
    1. 安装依赖包: 演示者首先停止服务器,并根据官方文档指引,执行 pip install django-crispy-forms 命令安装了核心库。
    2. 关键配置: 刷新页面后问题依旧,经排查发现关键配置缺失。解决方案是在 settings.py 中进行两项核心配置:
      • 'crispy_forms''crispy_bootstrap5' 添加到 INSTALLED_APPS 列表中。
      • 添加 CRISPY_ALLOWED_TEMPLATE_PACKS = "bootstrap5"CRISPY_TEMPLATE_PACK = "bootstrap5" 来指定使用的模板包。
  • 问题解决: 完成上述配置后,刷新页面,表单成功渲染并应用了 Bootstrap 5 的样式。

功能验证与版本确认

为确保集成成功,教程进行了功能测试并澄清了版本问题。

  • 用户认证流程: 演示者成功地完成了创建新用户、登录及登出操作,验证了表单提交和后端逻辑均正常工作。
  • Bootstrap 版本: 演示者纠正了早期配置中可能存在的版本选择失误,明确指出本教程针对的是 Bootstrap 5,并鼓励观众对项目代码贡献 Pull Request。

后续计划与总结

视频结尾,演示者对未来内容进行了预告。

  • 未来内容: 下一期视频将重点介绍如何在 Django 项目中集成 Tailwind CSS
  • 互动呼吁: 演示者感谢观众的观看,并鼓励大家点赞、分享和订阅频道以获取更新。