上一篇

下一步

练习 - 实现 django-crispy-forms

已完成

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

django-crispy-forms 库

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

安装该库

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

1. 在 Visual Studio Code 中，打开 requirements.txt。

2. 在文件底部，添加一个新行，其内容如下：

   django-crispy-forms
   

3. 选择“终端”>“新建终端”，打开新的终端窗口。

4. 通过运行以下命令，安装所有包：

   pip install -r requirements.txt
   

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

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

1. 在 Visual Studio Code 中，打开 project/settings.py。

2. 在 # TODO: Register crispy_forms 行下方，添加以下代码来注册 django-crispy-forms。

   # TODO: Register crispy_forms
   'crispy_forms',
   

3. 在 # 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。

1. 在 Visual Studio Code 中，打开 dog_shelters/templates/dog_form.html。

2. 在读作 {# TODO: Load crispy_forms_tags #} 的行下方，添加以下代码以加载筛选器或标记。

   {# TODO: Load crispy_forms_tags #}
   {% load crispy_forms_tags %}
   

3. 将读作 {{ form.as_p }} 的行替换为以下代码，以使用 crispy 筛选器。

   {{ form | crispy }}
   

测试站点

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

1. 选择“文件”>“全部保存”，以保存所有文件。

2. 在浏览器中转到 http://localhost:8000/dog/register。

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

   

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

继续