Django Forms 和 Bootstrap - CSS 类和 <divs> [英] Django Forms and Bootstrap - CSS classes and <divs>

问题描述

我在 Django 中使用 Twitter Bootstrap 来呈现表单.>

Bootstrap 可以很好地格式化您的表单 - 只要您拥有它期望包含的 CSS 类.

但是，我的问题是 Django 的 {{ form.as_p }} 生成的表单不能很好地与 Bootstrap 一起呈现，因为它们没有这些类.

例如 Django 的输出:

 
<div style='display:none'><input type='hidden' name='csrfmiddlewaretoken'value='26c39ab41e38cf6061367750ea8c2ea8'/>

<p><label for="id_name">名称:</label><input id="id_name" type="text" name="name" value="FOOBAR" maxlength="20"/></p><p><label for="id_directory">目录:</label><input id="id_directory" type="text" name="directory" value="FOOBAR" maxlength="60"/></p><p><label for="id_comment">评论:</label><textarea id="id_comment" rows="10" cols="40" name="comment">Lorem ipsum dolor sic amet.</textarea></p><p><label for="id_server">服务器:</label><选择名称="服务器" id="id_server"><option value="">---------</option><选项值="1"selected="selected">sydeqexcd01.au.db.com</option><option value="2">server1</option><option value="3">server2</option><option value="4">server3</option></选择></p><input type="submit" value="Submit"/></表单>

据我所知，Bootstrap 要求你的表单有一个

，每个 都有 class="control-label"，并且每个都被包裹在一个

中:

<label class="control-label" for="input01">文本输入</label><div class="控件"><input type="text" class="xlarge" name="input01"><p class="help-text">此处的帮助文本.请务必像这样填写，否则！</p>

</fieldset>

然而，在 Django 中为每个表单字段添加自定义 CSS 标签是相当痛苦的:

将类添加到 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屋！