我正在使用Twitter Bootstrap和Django来渲染表单。
Bootstrap可以很好地格式化您的表单 - 只要您拥有预期包含的CSS类。
但是，我的问题是Django的{{ form.as_p }}生成的表单不能很好地使用Bootstrap，因为它们没有这些类。
例如，Django的输出：
<form class="horizontal-form" action="/contact/" method="post">
<div style='display:none'>
<input type='hidden' name='csrfmiddlewaretoken'
value='26c39ab41e38cf6061367750ea8c2ea8'/>
</div>
<p><label for="id_name">Name:</label> <input id="id_name" type="text" name="name" value="FOOBAR" maxlength="20" /></p>
<p><label for="id_directory">Directory:</label> <input id="id_directory" type="text" name="directory" value="FOOBAR" maxlength="60" /></p>
<p><label for="id_comment">Comment:</label> <textarea id="id_comment" rows="10" cols="40" name="comment">Lorem ipsum dolor sic amet.</textarea></p>
<p>
<label for="id_server">Server:</label>
<select name="server" id="id_server">
<option value="">---------</option>
<option value="1"
selected="selected">sydeqexcd01.au.db.com</option>
<option value="2">server1</option>
<option value="3">server2</option>
<option value="4">server3</option>
</select>
</p>
<input type="submit" value="Submit" />
</form>
据我所知，Bootstrap要求您的表单有<fieldset class="control-group">，每个<label>都有class="control-label"，每个<input>都包含在<div>中}：
<fieldset class="control-group">
<label class="control-label" for="input01">Text input</label>
<div class="controls">
<input type="text" class="xlarge" name="input01">
<p class="help-text">Help text here. Be sure to fill this out like so, or else!</p>
</div>
</fieldset>
但是，在Django中为每个表单字段添加自定义CSS标签非常痛苦：
Add class to Django label_tag() output
是否有更聪明的方法可以使用{{ form.as_p }}，或者遍历字段，而不必手动指定内容，或者做一大堆hackery？
干杯， 维克多
答案 0 :(得分：50)
这就是我提出的：
<form class="form-horizontal" method="post">{% csrf_token %}
<fieldset>
<legend>{{ title }}</legend>
{% for field in form %}
{% if field.errors %}
<div class="control-group error">
<label class="control-label">{{ field.label }}</label>
<div class="controls">{{ field }}
<span class="help-inline">
{% for error in field.errors %}{{ error }}{% endfor %}
</span>
</div>
</div>
{% else %}
<div class="control-group">
<label class="control-label">{{ field.label }}</label>
<div class="controls">{{ field }}
{% if field.help_text %}
<p class="help-inline"><small>{{ field.help_text }}</small></p>
{% endif %}
</div>
</div>
{% endif %}
{% endfor %}
</fieldset>
<div class="form-actions">
<button type="submit" class="btn btn-primary" >Submit</button>
</div>
</form>
答案 1 :(得分：44)
我喜欢使用"django-crispy-forms"，这是django-uni-form的继承者。这是一个很棒的小API，并且对Bootstrap有很好的支持。
当我需要更多地控制渲染时，我倾向于使用模板过滤器来快速移植旧代码和快速表单，以及模板标记。
答案 2 :(得分：37)
当django-crispy-forms无法使用时（例如，当模板单独处理表单的每个字段时），jcmrgo的答案是唯一的方法。基于他的回答，这里是 Bootstrap 3 的解决方案（将他的版本留给Boostrap 2），并且调整模板中的字段类。虽然使用Django的标准库（在其他解决方案中导致额外的表单或模板标记）无法从模板中访问字段类，但这里有一个解决方案，可以将正确的类设置为字段标记，而无需在外部编写代码模板：
{% load i18n widget_tweaks %}
<form class="form-horizontal" role="form" action="." method="post">
{% csrf_token %}
{% for field in form %}
{% if field.errors %}
<div class="form-group has-error">
<label class="col-sm-2 control-label" for="id_{{ field.name }}">{{ field.label }}</label>
<div class="col-sm-10">
{{ field|attr:"class:form-control" }}
<span class="help-block">
{% for error in field.errors %}{{ error }}{% endfor %}
</span>
</div>
</div>
{% else %}
<div class="form-group">
<label class="col-sm-2 control-label" for="id_{{ field.name }}">{{ field.label }}</label>
<div class="col-sm-10">
{{ field|attr:"class:form-control" }}
{% if field.help_text %}
<p class="help-block"><small>{{ field.help_text }}</small></p>
{% endif %}
</div>
</div>
{% endif %}
{% endfor %}
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">{% trans "Submit" %}</button>
</div>
</div>
</form>
这需要安装django-widget-tweaks并widget_tweaks添加到INSTALLED_APPS。
答案 3 :(得分：10)
你可以这样做：
{% for field in form %}
<fieldset class="control-group">
<label class="control-label" for="id_{{ field.name }}">{{ field.label }}</label>
<div class="controls">
{{ field }}
<p class="help-text">{{ field.help_text }} </p>
</div>
</fieldset>
{% endfor %}
答案 4 :(得分：8)
为了向Django生成的表单添加CSS属性，只需在forms.py中使用以下代码：
Recepient = forms.ChoiceField(label=u'Recepient', widget=forms.Select(attrs={'id':'combobox'}))
它将生成以下HTML代码：
<label for="id_Recepient">Recepient</label>
<select id="combobox" name="Recepient">
答案 5 :(得分：4)
答案 6 :(得分：3)
例如，您可以创建一个类，以您想要的方式定义属性，并相应地调用它。
class ContactForm(ModelForm):
class Meta:
model = Contact
created = MyDatePicker()
class Uniform(forms):
def __init__(self, *args, **kwargs):
attrs = kwargs.pop("attrs",{})
attrs["class"] = "span3"
kwargs["attrs"] = attrs
super(Uniform, self).__init__(*args, **kwargs)
class MyDatePicker(Uniform,forms.DateInput)
def __init__(self, *args, **kwargs):
attrs = kwargs.pop("attrs",{})
attrs["class"] = "datepick"
attrs["id"] =kwargs.get('datetag', '')
kwargs["attrs"] = attrs
super(MyDatePicker, self).__init__(*args, **kwargs)
答案 7 :(得分：3)
这是我使用django_tweaks的版本，结果更好看。我发现使用render_field比添加过滤器更轻。我还添加了bootstrap格式的警报消息并关闭了导航器验证（带有无效）。我对Django比较新，所以如果你发现任何无意义的话，请不要犹豫
std::map答案 8 :(得分：2)
最快最简单的方法是定义扩展Django Form类的基类，并重新定义其as_p方法，以Bootstrap要求的格式输出。然后将表单更改为从新的Form类而不是Django的继承。
答案 9 :(得分：2)
引导样式表单JOIN而不是<div>。所以，如果你希望它看起来不错，你需要以100％恕我直言的方式去引导。这是我的首选方式：
使用django-bootstrap3应用。例如：
<p>注意1）表格类属性中的{% load bootstrap3 %}
<form class="signup form-horizontal" id="signup_form" method="post" action="{% url 'account_signup' %}">
{% csrf_token %}
{% bootstrap_form form layout="horizontal" %}
{% buttons submit='Sign Up »' reset='Reset Form' layout='horizontal' %}{% endbuttons %}
</form>
2）bootstrap_form布局和3）按钮布局。
答案 10 :(得分：0)
除了其他朋友说的话，我建议您使用“ django-widget-tweaks”。
答案可能是这样的：
{% for field in form %}
<label for="{{ field.label }}">{{ field.label }}</label>
{{ field|add_class:"form-control" }}
<span class="error-block">{{ field.errors }}</span>
{% endfor %}