Django 配合Bootstrap进行form表单渲染

这周在开始逐步做一些前端的工作，主要是套bootstrap渲染。
不过碰到一个问题，因为Django后端给前端提供的form是直接{{form}}的形式，而bootstrap则是要求在html内修改class这样的操作来进行渲染的。

遇到这样的情况，就需要用到django-crispy-forms这个包

1：安装

pip install django-crispy-forms
然后在settings里面设置增加app
INSTALLED_APPS = [ ..., 'crispy_forms',]
这里切记是下划线，不是中横杠，我写的时候填错了，还踩了个无法导入crispy_forms的坑。
最后还是在settings里面填上变量
CRISPY_TEMPLATE_PACK = 'bootstrap4' #用bootstrap来渲染django的默认模板内的forms

2：使用-整体表单

接着，在你需要渲染的页面的顶端加入
{% load crispy_forms_tags %}
并且，在你需要渲染的form后面加上过滤 {{form|crispy}}
举例如下

{% extends 'base_page.html' %}
{% load staticfiles %}
{% load crispy_forms_tags %}
{% block title %}球队介绍{% endblock %}

.........省略若干代码

    {% if user.is_authenticated %}
        <form method="post">
        {% csrf_token %}
        {{article_form.media}}
        {{article_form|crispy}}
        <button type="submit">提交</button>
        </form>
    {% endif %}

来看下前后对比

未渲染

渲染后

3：单个字段

如果你只是想针对某个字段进行渲染，也是可以的

那你就在渲染的表单时候把字段单独拿出来，如下
{{form.title|as_crispy_field}}
效果图就不放了。性质和上面整体渲染是一样的

参考资料：
https://simpleisbetterthancomplex.com/tutorial/2018/08/13/how-to-use-bootstrap-4-forms-with-django.html