我正在使用Twitter Bootstrap和Django来呈现表单。
只要包含它期望的CSS
类,Bootstrap
就可以很好地格式化您的表单。
然而,我的问题是,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 }}
,也可以迭代字段,而不必手动指定内容,或者进行一大堆黑客操作?
干杯,维克多
发布于 2012-04-03 03:37:03
我喜欢使用"django-crispy-forms",它是django-uni-form的继承者。这是一个很棒的小API,对Bootstrap有很好的支持。
我倾向于使用模板过滤器来快速移植旧代码和快速表单,当我需要更多的渲染控制时,我倾向于使用模板标记。
发布于 2012-08-29 03:23:10
这是我想出来的:
<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>
发布于 2011-12-12 20:56:23
你可以这样做:
{% 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 %}
https://stackoverflow.com/questions/8474409
复制相似问题