我创建了一个 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 %}
将此添加到您的表单中:
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
for myField in self.fields:
self.fields[myField].widget.attrs['class'] = 'form-control'
要向表单添加引导样式,您需要将此代码粘贴到 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/表格/
这应该会给你你想要的样式,尽管你可能还想添加一些你自己的样式来得到你想要的。
要求查看您的 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>
希望这对有需要的人有帮助。