首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Django Forms和Bootstrap - CSS类和<divs>

Django Forms和Bootstrap - CSS类和<divs>
EN

Stack Overflow用户
提问于 2011-12-12 20:37:16
回答 10查看 93.6K关注 0票数 72

我正在使用Twitter Bootstrap和Django来呈现表单。

只要包含它期望的CSS类,Bootstrap就可以很好地格式化您的表单。

然而,我的问题是,Django的{{ form.as_p }}生成的表单在Bootstrap中不能很好地呈现,因为它们没有这些类。

例如,Django的输出:

代码语言:javascript
复制
    <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>

代码语言:javascript
复制
<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 }},也可以迭代字段,而不必手动指定内容,或者进行一大堆黑客操作?

干杯,维克多

EN

回答 10

Stack Overflow用户

回答已采纳

发布于 2012-04-03 03:37:03

我喜欢使用"django-crispy-forms",它是django-uni-form的继承者。这是一个很棒的小API,对Bootstrap有很好的支持。

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

票数 52
EN

Stack Overflow用户

发布于 2012-08-29 03:23:10

这是我想出来的:

代码语言:javascript
复制
<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>
票数 59
EN

Stack Overflow用户

发布于 2011-12-12 20:56:23

你可以这样做:

代码语言:javascript
复制
{% 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 %}
票数 11
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/8474409

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档