如何使用引导 CSS 设置 django 表单的样式?
Posted
技术标签:
【中文标题】如何使用引导 CSS 设置 django 表单的样式?【英文标题】:How can I style django forms with bootstrap CSS? 【发布时间】:2019-01-07 17:33:25 【问题描述】:我在django中写了一个表单类,在尝试输出的时候,发现看起来并不美观。
class AddAppointmentForm(forms.Form):
docchoices = []
for doc in doctor.objects.all():
docst = [doc.docid, doc.name]
docchoices.append(docst)
# CHOICES = [('select1', 'select 1'),
# ('select2', 'select 2')]
name = forms.CharField(label='Name', max_length=100)
gender = forms.ChoiceField(
required=True,
widget=forms.Radioselect,
choices=[('male', 'Male'), ('female', 'Female')]
)
age = forms.IntegerField(max_value=100,min_value=1, required=True)
phone = forms.CharField(label='Phone', max_length=14, required=True)
email = forms.CharField(label='Email', max_length=25, required=False)
address = forms.CharField(label='Address', max_length=60, required=False)
city = forms.CharField(label='City', max_length=20, required=False)
doctors = forms.ChoiceField(
required=True,
widget=forms.Select,
choices=docchoices,
)
# Load the tag library # % extends "appointments/base.html" % % block title %Create appointment% endblock % % block content %
<div class="container">
<form class="needs-validation" novalidate="" action="/appointments/appointmentcreated" method="post">
% csrf_token %
<div class="row">
<div class="col-md-12 mb-6">
<label for="Name">Name</label> form.name
</div>
</div>
<div class="row py-2 ">
<div class="input-group col-md-6 mb-3">
<span class="input-group-addon">Age</span> form.age
</div>
<div class="input-group col-md-6 mb-3">
<span class="input-group-addon">Gender</span> form.gender
</div>
</div>
<div class="row py-2 ">
<div class="mb-3">
<label for="email">Phone
<span class="text-muted">(Required)</span>
</label> form.phone
</div>
</div>
<div class="row py-2 ">
<div class="mb-3">
<label for="email">Email
<span class="text-muted">(Optional)</span>
</label> form.email
</div>
</div>
<div class="mb-3">
<label for="address">Address</label> form.address
</div>
<div class="row">
<div class="col-md-12 mb-6">
<label for="city">City</label> form.city
</div>
</div>
<div class="row">
<div class="col-md-12 mb-6">
<label for="sel_doctor">Select Doctor</label> form.doctors
</div>
</div>
<div class="row">
<div class="col-md-2 mb-1">
<button class="btn btn-primary btn-block" type="submit">Create appointment</button>
</div>
</div>
</form>
</div>
% endblock %
我尝试按照here 的建议设置它的样式。但是 Charfield 不接受 attrs 选项。
name = forms.CharField(label='Name', max_length=100, attrs=
'class': 'form-control')
File "/home/joel/myappointments/appointments/forms.py", line 7, in <module>
class AddAppointmentForm(forms.Form):
File "/home/joel/myappointments/appointments/forms.py", line 15, in AddAppointmentForm
'class': 'form-control')
File "/home/joel/.local/lib/python3.6/site-packages/django/forms/fields.py", line 214, in __init__
super().__init__(**kwargs)
TypeError: __init__() got an unexpected keyword argument 'attrs'
在 django 表单中使用像 bootstrap 这样的 CSS 框架的正确方法是什么?
【问题讨论】:
如果创建了新的Doctor
,docchoices
不应该得到更新吗?
@WillemVanOnsem 没有得到你。每次重新加载表单时不会更新吗?
no for 循环是在构造 class 时执行的,而不是类的对象。这就是为什么类中的for
循环如此罕见的原因之一。我见过的这种for
循环的唯一真正用例是,如果您想构建大量(几乎)相同的函数。
Define css class in django Forms的可能重复
有一个 Django 应用程序crispy-forms。它使用 Bootstrap(或 Foundation)呈现表单。
【参考方案1】:
您需要的是小部件调整。
它允许您将自定义样式和 CSS 类应用于 django 变量(也包括表单对象)
pip install django-widget-tweaks
然后将“widget-tweaks”添加到您安装的应用程序中。
INSTALLED_APPS = [
...
'widget_tweaks',
...
]
然后在您的模板中导入小部件调整
% load static %
% load widget_tweaks %
...
现在假设你想将类“abc”应用到表单元素“email”
form.email|add_class:"abc"
这会将“abc”类应用于该表单元素。 这是一种将样式应用到表单而不是弄乱后端代码的更简单、更简洁的方法
有关“django-widget-tweaks”的更多信息或文档,请查看此处:
https://github.com/jazzband/django-widget-tweaks
【讨论】:
以上是关于如何使用引导 CSS 设置 django 表单的样式?的主要内容,如果未能解决你的问题,请参考以下文章
如何将引导类添加到模板中的 Django CreateView 表单字段?