Django Crispy Forms Bootstrap 4 – Crispy Forms使用

学习Django crispy form bootstrap 4（如何在django中使用crispy表单）。 Django-Crispy-Forms表单教程。将Bootstrap Form与Django集成非常简单。 Bootstrap有很多Django库。在本教程中，我们将对Django中的Bootstrap Form使用django-crispy-forms。 Crispy-Forms是一个很棒的软件包，可以很好地控制Django项目中Bootstrap表单的呈现。

安装Crispy Forms：

pip install django-cripsy-forms

然后修改settings.py文件，在INSTALLED_APPS中增加：

 INSTALLED_APPS = [
    ...

    'crispy_forms',
]

CRISPY_TEMPLATE_PACK = 'bootstrap4'

INSTALLED_APPS = [

...

'crispy_forms',

]

CRISPY_TEMPLATE_PACK = 'bootstrap4'

下载并设置Django项目的Bootstrap表单
您可以从getbootstrap下载最新的Bootstrap 4版本。然后转到下载页面并获得Compiled CSS and JS版本。

或者，如果您不想下载，则可以使用托管的Bootstrap CDN –

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

为简单起见，我将使用CDN版本。这是我的base.html，下面的示例中引用了它–

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Hello, Django Fans!</title>
  </head>
  <body>
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-8">
          <h1 class="mt-2">Hello Django Fans</h1>
          <hr class="mt-0 mb-4">
          {% block content %}
          {% endblock %}
        </div>
      </div>
    </div>
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

<!doctype html>

<head>

<title>Hello, Django Fans!</title>

</head>

<body>

<h1 class="mt-2">Hello Django Fans</h1>

{% block content %}

{% endblock %}

</div>

</body>

</html>

如果对Django 模板不熟悉的可以先看上面的内容。

接下来就是如何使用CrispyForms了，假设我们有如下的model 如下：

# models.py
from django.db import models

class Product(models.Model):
    name = models.CharField(max_length=130)
    description = models.TextField(blank=True)
    price = models.FloatField(blank=True)

# models.py

from django.db import models

class Product(models.Model):

name = models.CharField(max_length=130)

description = models.TextField(blank=True)

price = models.FloatField(blank=True)

设我们要创建一个表单以在模型中添加产品。为此，我们使用CreateView。

# views.py
from django.views.generic import CreateView
from .models import Product

class ProductCreateView(CreateView):
    model = Product
    fields = ('name', 'description', 'price') 
    template_name = 'product.html'

# views.py

from django.views.generic import CreateView

from .models import Product

class ProductCreateView(CreateView):

model = Product

fields = ('name', 'description', 'price')

template_name = 'product.html'

在product.html文件中，base.html将对其进行扩展。在product.html中，我们将呈现ProductCreateView和表格。

<!-- product.html -->
{% extends 'base.html' %}

{% block content %}
  <form method="post">
    {% csrf_token %}
    {{ form }}
    <button type="submit" class="btn btn-success">Save person</button>
  </form>
{% endblock %}

{% extends 'base.html' %}

{% block content %}

{% csrf_token %}

<button type="submit" class="btn btn-success">Save person</button>

</form>

{% endblock %}

这是非常基本的表单渲染。 Django将仅使用纯字段来呈现样式。

https://studygyaan.com/wp-content/uploads/2019/09/CrispyFormBasic.png

用Bootstrap classes，渲染：

<!-- product.html --> 
{% extends 'base.html' %}

{% load crispy_forms_tags %}

{% block content %}
  <form method="post" novalidate>
    {% csrf_token %}
    {{ form|crispy }}
    <button type="submit" class="btn btn-success">Save Product</button>
  </form>
{% endblock %}

{% extends 'base.html' %}

{% load crispy_forms_tags %}

{% block content %}

{% csrf_token %}

<button type="submit" class="btn btn-success">Save Product</button>

</form>

{% endblock %}

用crispyforms后，结果如下：

https://studygyaan.com/wp-content/uploads/2019/09/CrispyForm.png

在某些情况下，您需要一些自由来呈现表单字段。您可以通过手动呈现字段并使用as_crispy_field模板过滤器来实现–

<!-- product.html -->
{% extends 'base.html' %}

{% load crispy_forms_tags %}

{% block content %}
  <form method="post" novalidate>
    {% csrf_token %}
    <div class="row">
      <div class="col-6">
        {{ form.name|as_crispy_field }}
      </div>
      <div class="col-6">
        {{ form.price|as_crispy_field }}
      </div>
    </div>
    {{ form.description|as_crispy_field }}
    <button type="submit" class="btn btn-success">Save Product</button>
  </form>
{% endblock %}

{% extends 'base.html' %}

{% load crispy_forms_tags %}

{% block content %}

{% csrf_token %}

</div>

</div>

<button type="submit" class="btn btn-success">Save Product</button>

</form>

{% endblock %}

https://studygyaan.com/wp-content/uploads/2019/09/CrispyFormAsField.png

Django-Crispy-Forms Helpers 方法：

Django Crispy Form有一个名为FormHelper的特殊类方法，该方法可以更好地控制如何呈现表单。

这是使用Form的UpdateView的示例–

# forms.py
from django import forms
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Submit
from product.models import Product

class ProductForm(forms.ModelForm):
    class Meta:
        model = Product
        fields = ('name', 'description', 'price')

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_method = 'post' # get or post
        self.helper.add_input(Submit('submit', 'Save Product'))

# forms.py

from django import forms

from crispy_forms.helper import FormHelper

from crispy_forms.layout import Submit

from product.models import Product

class ProductForm(forms.ModelForm):

class Meta:

model = Product

fields = ('name', 'description', 'price')

def __init__(self, *args, **kwargs):

super().__init__(*args, **kwargs)

self.helper = FormHelper()

self.helper.form_method = 'post' # get or post

self.helper.add_input(Submit('submit', 'Save Product'))

主要逻辑在__init __（）方法中。在该方法中，我们调用了Crispy FormHelper方法。使用辅助函数，我们定义了POST方法来处理表单。我们还用“保存产品”更改了提交标签。

现在我们来看，只是常规的Django代码：

# views.py
from django.views.generic import UpdateView
from .forms import ProductForm

class ProductUpdateView(UpdateView):
    model = Product
    form_class = ProductForm
    template_name = 'product-update.html'

# views.py

from django.views.generic import UpdateView

from .forms import ProductForm

class ProductUpdateView(UpdateView):

model = Product

form_class = ProductForm

template_name = 'product-update.html'

product-update.html –模板文件：

<!--  product-update.html -->
{% extends 'base.html' %}

{% load crispy_forms_tags %}

{% block content %}
  {% crispy form %}
{% endblock %}

{% extends 'base.html' %}

{% load crispy_forms_tags %}

{% block content %}

{% crispy form %}

{% endblock %}

在这里，我们可以简单地调用{％crispy％}模板标记并将表单实例作为参数传递。

https://studygyaan.com/wp-content/uploads/2019/09/CrispyFormHelper.png

使用Crispy表单进行高级表单渲染
本节将说明如何使用脆性表单功能处理高级表单呈现。 Django脆皮表单自定义模板。

Crispy Forms表格布局助手
我们可以使用Crispy Forms的表单助手功能来实现与图像（ image.）相同的布局。

# forms.py
from django import forms
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Submit
from product.models import Product

from crispy_forms.layout import Layout, Submit, Row, Column

class ProductForm(forms.ModelForm):
    class Meta:
        model = Product
        fields = ('name', 'description', 'price')

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_method = 'post' # get or post
        self.helper.layout = Layout(
            Row(
                Column('name', css_class='form-group col-md-6 mb-0'),
                Column('price', css_class='form-group col-md-6 mb-0'),
                css_class='form-row'
            ),
            'description',
            Submit('submit', 'Save Product')
        )

# forms.py

from django import forms

from crispy_forms.helper import FormHelper

from crispy_forms.layout import Submit

from product.models import Product

from crispy_forms.layout import Layout, Submit, Row, Column

class ProductForm(forms.ModelForm):

class Meta:

model = Product

fields = ('name', 'description', 'price')

def __init__(self, *args, **kwargs):

super().__init__(*args, **kwargs)

self.helper = FormHelper()

self.helper.form_method = 'post' # get or post

self.helper.layout = Layout(

Row(

Column('name', css_class='form-group col-md-6 mb-0'),

Column('price', css_class='form-group col-md-6 mb-0'),

css_class='form-row'

'description',

Submit('submit', 'Save Product')

)

而且，如果您看到模板的实现非常少。您可以从此处比较HTML代码（here.）。

{% extends 'base.html' %}

{% load crispy_forms_tags %}

{% block content %}
  {% crispy form %}
{% endblock %}

{% extends 'base.html' %}

{% load crispy_forms_tags %}

{% block content %}

{% crispy form %}

{% endblock %}

https://studygyaan.com/wp-content/uploads/2019/09/CrispyForm11.png

github:https://github.com/studygyaan/How-to-Use-Bootstrap-4-Forms-With-Django-Crispy-Forms

原文：https://studygyaan.com/django/how-to-use-bootstrap-4-forms-with-django-crispy-forms

M	T	W	T	F	S	S
« Jun
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

头脑的思考

头脑的思考

Django Crispy Forms Bootstrap 4 – Crispy Forms使用