Django Forms和Bootstrap - CSS类和<divs>
Django Forms和Bootstrap - CSS类和<divs>
提问于 2011-12-12 20:37:16
我正在使用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 }}，也可以迭代字段，而不必手动指定内容，或者进行一大堆黑客操作？
干杯，维克多
回答 10
Stack Overflow用户
回答已采纳
发布于 2012-04-03 03:37:03
我喜欢使用"django-crispy-forms"，它是django-uni-form的继承者。这是一个很棒的小API，对Bootstrap有很好的支持。
我倾向于使用模板过滤器来快速移植旧代码和快速表单，当我需要更多的渲染控制时，我倾向于使用模板标记。
Stack Overflow用户
发布于 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>Stack Overflow用户
发布于 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 %}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8474409
复制相关文章
相似问题
腾讯云开发者
