如何在 Python Django 中使用 Bootstrap 4 表单?

在这里,我将向您展示如何在 python django 中使用引导程序表单。我想向您展示如何在 python django api 中使用引导表单。我想与您分享如何在 python django 和 python 中使用引导表单。这篇文章将给你一个简单的例子,说明如何将引导表单与 python django bootstrap 和 django crispy forms一起使用。好吧,让我们深入了解这些步骤。

在这里,crispy forms 是一个很棒的应用程序,它可以让您控制如何呈现 Django 表单,而不会破坏默认行为。本教程将针对 Bootstrap 4 进行定制。

在这里,我将为您提供我们将帮助您举例说明如何使用 python django 形成引导程序。所以让我们看看下面的例子:

第 1 步:安装 Crispy Forms

在这一步中,我们将安装一个脆皮表格。使用 pip 命令安装它:

pip install django-crispy-forms

将其添加到您的 INSTALLED_APPS 并选择要使用的样式:
settings.py

INSTALLED_APPS = [ 
    ... 

    'crispy_forms', 
] 

CRISPY_TEMPLATE_PACK = 'bootstrap4'

第 2 步:创建模型

在这一步中,我们将需要用于存储联系人的数据库模型。打开 article/models.py 文件并添加以下代码:
article/models.py

from django.db import models

class Article(models.Model):
    title = models.CharField(max_length=50)
    content = models.TextField()

第 3 步:创建视图

在这一步中,我们需要在 article/views.py 文件中创建执行渲染视图文件的视图并添加:
article/views.py

from .models import Article
from django.views.generic import CreateView

class ArticleCreateView(CreateView):
    model = Article
    fields = ('title', 'content')

第 4 步:创建 Django 模板

接下来,打开 article/article_form.html 文件并添加:
/article/article_form.html

{% load crispy_forms_tags %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>How to Use Bootstrap 4 Forms With Python Django?</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container mt-5">
        <div class="row d-flex justify-content-center">
            <div class="col-md-9">
                <div class="card">
                    <div class="card-header">
                        <h4>How to Use Bootstrap 4 Forms With Python Django? - Tuts-Station.com</h4>
                    </div>
                    <div class="card-body">
                        <form method = "post" enctype="multipart/form-data">
                            {% csrf_token %}
                            {{ form|crispy }}
                            <button type="submit" class="btn btn-success">Submit</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

第 5 步:创建网址

在本节中,我们将创建 url 来访问我们的视图。转到 urls.py article/urls.py 文件并按如下方式更新它:
article/urls.py

from django.urls import path
from article.views import *

urlpatterns = [
    path('create', ArticleCreateView.as_view(), name='create'),
]

第 6 步:运行服务器

在这一步中,我们将运行本地开发服务器来玩我们的应用程序,而无需将其部署到网络上。

python manage.py runserver

接下来,使用 Web 浏览器访问 http://localhost:8000/create 地址。
输出

我希望它会帮助你……

how-to-use-bootstrap-4-forms-with-python-django

发表评论

邮箱地址不会被公开。 必填项已用*标注