Django Forms和Bootstrap - CSS类和< divs> [英] Django Forms and Bootstrap - CSS classes and <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.com< / 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.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>

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.

这篇关于Django Forms和Bootstrap - CSS类和< divs>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！