如何将引导样式添加到我的 django 表单中？

Question

我创建了一个 django 表单并将其输出到模板中。但我不明白如何添加引导样式，因为这个 django 形式不好。

输出图像：

代码：

{% extends 'base.html' %}
{% block title %}
    Contact Us
{% endblock %}

{% block content %}
<h1>Contact Us</h1>
<form method="post">
        {% csrf_token %}

        {% for field in form %}
            <div class="form-group">
                {{ field.label }}
                {{ field }}
            </div>
        {% endfor %}
        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
        <button class="btn btn-primary" type="submit" name="button">Send</button>
    </form>
{% endblock %}

Answer 1

将此添加到您的表单中：

def __init__(self, *args, **kwargs):
    super().__init__(*args, **kwargs)
    for myField in self.fields:
        self.fields[myField].widget.attrs['class'] = 'form-control'

Answer 2

要向表单添加引导样式，您需要将此代码粘贴到 CSS 标记之间的某个位置；

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

这适用于 JavaScript；

<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

这将为您的表单应用一些样式。
完成此操作后，如果您想更改样式，则必须使用 BootStrap 文档中指定的类，您可以在此处找到该类：https://getbootstrap.com/docs/4.1/components/表格/

这应该会给你你想要的样式，尽管你可能还想添加一些你自己的样式来得到你想要的。

Answer 3

要求查看您的 CSS 文件的人，看起来他们从未使用过 django 表单。 我明白你的意思。可惜我的回答这么晚了。

对于那些想知道的人来说，是的。您可以将 bootstrap 添加到 Django 模板中。但使用表格时，某些细节将不适用。问题是基本的登录表单使用基本的 Django 标签，它会自动填充所有表单字段，不允许我们单独自定义每个字段。见下文。

<form method="post">
  <fieldset>
   <legend>Log In</legend>
   {% csrf_token %}
   {{ form }}.  # <<<< This is the whole form (Login and Password fields)
   <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
 </form>

如果您正在寻找快速解决方案，我给您的建议是：

—安装 django bootstrap 表单

   $ pip install django-bootstrap-form

• 将其添加到 SETTINGS.py 中的 INSTALLED_APPS 中

  已安装的应用程序 = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'bootstrapform', # <<<<<<. HERE ]

现在在每个 .html 文件中，您在顶部添加表单（在您使用的扩展之后）

{% load bootstrap %}

然后。在您的表单中与表单标签一起使用

像这样：

<form action="." method="POST">

 {% csrf_token %}

 {{ form|bootstrap }}.  # <<<<<<<<<< This is what's important.

 <input type="submit" class="btn btn-default" value="Criar">
</form>

希望这对有需要的人有帮助。