使用django-crispy-form美化form表单

最新推荐文章于 2025-02-15 23:30:51 发布

Chenyaxu

最新推荐文章于 2025-02-15 23:30:51 发布

阅读量4.7k

点赞数

文章标签： python django

本文链接：https://blog.csdn.net/yx1179109710/article/details/81189282

版权

本文详细介绍了如何使用Django Crispy Forms插件来美化Django项目的表单，包括安装步骤、配置方法及如何结合Bootstrap实现响应式设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

django-crispy-form的具体使用参照https://django-crispy-forms.readthedocs.io/en/latest/install.html#installing-django-crispy-forms

1、首先下载django-crispy-form包

使用 pip install django-crispy-form

2、具体配置

1）在 settings.py 的 INSTALLED_APPS 中加 'crispy_forms',

2）在 settings.py 中加 CRISPY_TEMPLATE_PACK = 'bootstrap3'

3）在公共的html中顶部加{% load crispy_forms_tags %}，<form>标签中加 {{ form | crispy }}

例如：

         {% load crispy_forms_tags %}
         <form action="" method="post">
             {% csrf_token %}
             {{ form | crispy }}
     {#        {{ form }}#}
     {#        {{ form.as_p }}#}
     {#        {{ form.as_table }}#}
     {#        {{ form.as_ul }}#}
             <input type="submit" value="提交">
         </form>

4）在bootstrap(官网：https://www.bootcdn.cn/）中下载样式：

要显示的html中：

在<head>中加bootstrap的css样式（3.3.7版本的）：

在<body>中加bootstrap的js样式（3.3.7版本的）：

在<body>中加bootstrap的jq样式（放在js的上面）：

例如：

     <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>Django Form</title>
         <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
     </head>
     <body>
     div <div class="container">
     <div align="center">
         <h1>Django Form 表单</h1>
         <hr>
     {#    <form action="" method="post">#}
     {#        {% csrf_token %}#}
     {#        {{ form }}#}
     {#        {{ form.as_p }}#}
     {#        {{ form.as_table }}#}
     {#        {{ form.as_ul }}#}
     {#        <input type="submit" value="提交">#}
     {#    </form>#}
         {% include 'snippet/form.html' %}
     </div>
     </div>
         <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
         <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
     </body>
     </htm