练习 - 实现 django-crispy-forms

7 分钟

查看创建的窗体后，你可能会注意到格式设置与页面的其余部分不同。我们使用的是 Bootstrap，而窗体目前并未使用它。幸运的是，有一个可以确保窗体也使用 Bootstrap 的库。

django-crispy-forms 库

django-crispy-forms 库进一步增强了 Django 生成窗体的方式。我们将探讨如何使用库来确保窗体使用 Bootstrap。

安装该库

与任何 Python 库一样，我们使用 pip 安装 django-crispy-forms。

在 Visual Studio Code 中，打开 requirements.txt。
在文件底部，添加一个新行，其内容如下：
```
django-crispy-forms
```
选择“终端”>“新建终端”，打开新的终端窗口。
通过运行以下命令，安装所有包：
```
pip install -r requirements.txt
```

在 Django 中注册应用并配置模板

Django 使用的任何内容都必须注册为应用或中间件。由于 django-crispy-forms 是一个应用，我们将它列在 INSTALLED_APPS 列表中。

在 Visual Studio Code 中，打开 project/settings.py。
在 # TODO: Register crispy_forms 行下方，添加以下代码来注册 django-crispy-forms。
```
# TODO: Register crispy_forms
'crispy_forms',
```
在 # TODO: Set template_pack 的、行下方，添加以下代码来配置 django-crispy-forms 以使用 Bootstrap 4。
```
# TODO: Set template_pack
CRISPY_TEMPLATE_PACK = 'bootstrap4'
```

更新模板以使用 django-crispy-forms

django-crispy-forms 的绝妙工作大部分是通过筛选器完成的。使用筛选器，可以在模板中获取变量，并将其传递到其他处理程序或进程。在本例中，crispy 筛选器会将我们的窗体转换为指定的模板，即 Bootstrap 4。

在 Visual Studio Code 中，打开 dog_shelters/templates/dog_form.html。
在读作 {# TODO: Load crispy_forms_tags #} 的行下方，添加以下代码以加载筛选器或标记。
```
{# TODO: Load crispy_forms_tags #}
{% load crispy_forms_tags %}
```
将读作 {{ form.as_p }} 的行替换为以下代码，以使用 crispy 筛选器。
```
{{ form | crispy }}
```

测试站点

安装并更新了所有内容后，让我们来测试站点。

选择“文件”>“全部保存”，以保存所有文件。
在浏览器中转到 http://localhost:8000/dog/register。

你会看到页面现在正对窗体使用 Bootstrap。

你现在已经更新了应用程序，以便窗体使用 Bootstrap。