1. 首页
  2. 问题
  3. Django表单和Bootstrap-CSS类和<divs>
小编典典

Django表单和Bootstrap-CSS类和<divs>

django

我将Django与Twitter Bootstrap结合使用来渲染表单。

Bootstrap可以很好地格式化你的表单-只要你具有CSS期望包含的类即可。

但是，我的问题是，由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">，每个

<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标签是一件很痛苦的事情：

将类添加到Django label_tag（）输出

是否有一种更聪明的方法，可以使用{{ form.as_p }}，或遍历这些字段，而无需手动指定事物，或者进行大量的黑客攻击？


阅读 766

收藏
2020-03-31

共2个答案

小编典典

我喜欢使用“ django-crispy-forms”，它是django-uni-form的后继版本。这是一个很棒的小API，并且对Bootstrap有很好的支持。

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

2020-03-31
小编典典

这是我想出的：

<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>
2020-03-31