当前位置: 首页 > 面试题库 >

Django表单和Bootstrap-CSS类和

狄令
2023-03-14
问题内容

我将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 }},或遍历这些字段,而无需手动指定事物,或者进行大量的黑客攻击?


问题答案:

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

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



 类似资料:
  • 问题内容: 我将Django与TwitterBootstrap结合使用来渲染表单。 可以很好地格式化您的表单-只要您包含期望的类即可。 但是,我的问题是,由Django生成的表单在Bootstrap中表现不佳,因为它们没有这些类。 例如,Django的输出: 据我所知,Bootstrap要求您的表单具有,每个具有,并且每个都包装在中: 是否有一种更聪明的方式来使用或遍历这些字段,而不必手动指定事物

  • 本文向大家介绍Bootstrap CSS布局之表单,包括了Bootstrap CSS布局之表单的使用技巧和注意事项,需要的朋友参考一下 1. 表单 表单是html网页交互很重要的部分,同时也是BootSTrap框架中的核心内容,表单提供了丰富的样式(基础、内联、横向) 表单的元素 input textarea select checkbox radio(checkbox和radio是input的特

  • 问题内容: 我想样式如下: forms.py: contact_form.html: 例如,如何设置一个类或ID为subject,email,message以提供外部样式表到? 问题答案: 摘自我的答案: 如何在Django中使用 标记表单字段 要么 要么 以上是对完成所要询问内容的原始问题的代码进行的最简单的更改。如果你在其他地方重复使用表格,也可以避免重复。如果你使用Django的as_tab

  • 主要内容:表单布局,实例,实例,实例,支持的表单控件,实例,实例,实例,实例,静态控件,实例,表单控件状态,实例,表单控件大小,实例,表单帮助文本,实例在本章中,我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式。下面列

  • 问题内容: 我在Bootstrap中使用Angular。这是供参考的代码: Bootstrap具有以下形式的无效字段样式:这些字段在字段为空时启动。现在我也通过Angular进行了一些模式匹配。当“:invalid”关闭但“ .ng- invalid”打开时,这会产生奇怪的情况,这将需要我为“ .ng-invalid”类重新实现引导CSS类。 我看到两个选择,但都遇到麻烦 使Angular使用一些

  • 我们最后一件关于我们的网站的事情就是创建一个漂亮的方式来增加和编辑博客文章。 Django的管理是很酷,但是它很难去自定义,变得更漂亮。 通过forms,我们可以拥有对我们界面绝对的权利—我们能够做几乎我们能想象到的所有事情! Django表单的一个好处就是我们既可以从零开始自定义,也可以创建ModelForm,它将表单的结果保存到模型里。 这正是我们想做的:我们将为我们自己的Post模型创建一个