Django Forms和Bootstrap

本文介绍了Django Forms和Bootstrap - CSS类和< divs>的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我使用 Twitter Bootstrap 与Django呈现表单。

Bootstrap可以很好地格式化你的表单，只要你有它期望包括的CSS类。

我的问题是，由Django的 {{form.as_p}} 生成的表单不能很好地与Bootstrap，因为他们没有这些类。例如，Django的输出：

< form class =horizo​​ntal-formaction =/ contact /method =post> < div style ='display：none'< input type ='hidden'name ='csrfmiddlewaretoken'value ='26c39ab41e38cf6061367750ea8c2ea8'/> < / div> < p>< label for =id_name>姓名：< / label> < input id =id_nametype =textname =namevalue =FOOBARmaxlength =20/>< / p> < p>< label for =id_directory>目录：< / label> < input id =id_directorytype =textname =directoryvalue =FOOBARmaxlength =60/>< / p> < p>< label for =id_comment>注释：< / label> < textarea id =id_commentrows =10cols =40name =comment> Lorem ipsum dolor sic amet。< / textarea>< / p& < p>< label for =id_server>伺服器：< / label> < select name =serverid =id_server> < option value => ---------< / option> < option value =1selected =selected> sydeqexcd01.au.db< / option> < option value =2> server1< / option> < option value =3> server2< / option> < option value =4> server3< / option> < / select>< / p> < input type =submitvalue =Submit/> < / form>

从我可以知道，Bootstrap要求你的表单有一个< fieldset class =control-group> ，每个< label> ：< div> ： / p>

< fieldset class =control-group> < label class =control-labelfor =input01>文本输入< / label> < div class =controls> < input type =textclass =xlargename =input01> < p class =help-text>帮助文本。一定要这样填写，否则！< / p> < / div> < / fieldset>但是，为Django中的每个表单字段添加自定义CSS标签是相当痛苦的：

$

b $ b

将类添加到Django label_tag（）输出

有没有更聪明的方式使用 {{form.as_p}}

干杯，维克托

解决方案

我喜欢使用django-crispy-forms这是django-uni-form的后继。这是一个伟大的小API，并对Bootstrap有很大的支持。

我倾向于使用模板过滤器快速移植旧代码和快速表单，模板标签，当我需要更多的控制渲染。

I'm using Twitter Bootstrap with Django to render forms.

Bootstrap can format your forms quite nicely - as long as you have the CSS classes it expects included.

However, my issue is that the forms generated by Django's {{ form.as_p }} don't render well with Bootstrap, as they don't have these classes. For example, the output from 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</option> <option value="2">server1</option> <option value="3">server2</option> <option value="4">server3</option> </select></p> <input type="submit" value="Submit" /> </form>

From what I can tell, Bootstrap requires that your forms has a <fieldset class="control-group">, each <label> has class="control-label", and each <input> is wrapped in a <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>

However, adding custom CSS labels to every form field in Django is rather painful:

Add class to Django label_tag() output

Is there a smarter way of either using {{ form.as_p }}, or iterating through the fields, without having to manually specify things, or do a whole bunch of hackery?

Cheers, Victor

解决方案

I like to use "django-crispy-forms" which is the successor to django-uni-form. It's a great little API and has great support for Bootstrap.

I tend to use the template filters for quickly porting old code and quick forms, and the template tags when I need more control over the rendering.