小编典典

Django Forms and Bootstrap-CSS类和

css

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

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">,每个<label>具有class="control-label",并且每个<input>都包装在中<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>

是否有一种更聪明的方式来使用{{ form.as_p }}或遍历这些字段,而不必手动指定事物,或者进行大量的黑客攻击?


阅读 301

收藏
2020-05-16

共1个答案

小编典典

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

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

2020-05-16