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

Django Forms and Bootstrap-CSS类和

郎欣然
2023-03-14
问题内容

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


问题答案:

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

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



 类似资料:
  • 主要内容:1、first-child,2、last-child,3、nth-​​child伪类是 W3C 制定的一套选择器的特殊状态,通过伪类您可以设置元素的动态状态,例如悬停(hover)、点击(active)以及文档中不能通过其它选择器选择的元素(这些元素没有 ID 或 class 属性),例如第一个子元素(first-child)或者最后一个子元素(last-child)。 伪类的名称不区分大小写,但需要以冒号 开头。另外,伪类需要与 CSS 中的选择器结合使用,语法格式如下:

  • 本文向大家介绍CSS 伪类,包括了CSS 伪类的使用技巧和注意事项,需要的朋友参考一下 示例 伪类是允许基于文档树之外或其他选择器或组合器无法表达的信息进行选择的关键字。该信息可以与某个状态(状态和动态伪类),位置(结构和目标伪类),前者的否定(否定伪类)或语言(lang伪类)相关联。示例包括是否跟随链接(:visited),鼠标悬停在元素上(:hover),复选框是否选中(:checked)等。

  • CSS伪类是用来添加一些选择器的特殊效果。 语法 伪类的语法:selector:pseudo-class {property:value;} CSS类也可以使用伪类:selector.class:pseudo-class {property:value;} anchor伪类 在支持 CSS 的浏览器中,链接的不同状态都可以以不同的方式显示a:link {color:#FF0000;} /* 未访问

  • 问题内容: 我可以做以下事情吗? 问题答案: 香草CSS不可能。但是,您可以使用类似: Sass使CSS再次变得有趣。Sass是CSS3的扩展,添加了嵌套规则,变量,mixins,选择器继承等。使用命令行工具或网络框架插件将其转换为格式良好的标准CSS。 要么 不用构造长的选择器名称来指定继承,在Less中,您可以简单地将选择器嵌套在其他选择器中。这样可以使继承更清晰,样式表更短。 例:

  • 问题内容: CSS ID和CSS Class之间的基本区别是什么? 有人告诉我,ID在一个页面中只能使用一次。但是我发现它可以多次使用。 喜欢 问题答案: 它只能分配给页面中的一个元素,但是可以在多个CSS规则中使用。可以将类名称分配给页面中的多个元素。

  • 主要内容:jQuery CSS 类,全局类,按钮类,图标类,主题类 Classes,网格类jQuery CSS 类 jQuery Mobile CSS 类来设置不同元素的样式。 以下列表包含了通用的 CSS 样式: 全局类 以下类可以在 jQuery Mobile 小工具中使用 (按钮,工具条,面板,表格,列表等。): Class 描述 ui-corner-all 为元素添加圆角 ui-shadow 为元素添加阴影 ui-overlay-shadow 为元素添加多层阴影 ui-mini

  • jQuery CSS 类 jQuery Mobile CSS 类来设置不同元素的样式。 以下列表包含了通用的 CSS 样式: 全局类 以下类可以在 jQuery Mobile 小工具中使用 (按钮,工具条,面板,表格,列表等。): Class 描述 ui-corner-all 为元素添加圆角 ui-shadow 为元素添加阴影 ui-overlay-shadow 为元素添加多层阴影 ui-mini

  • 描述 (Description) 通过在元素中使用属性data-toggler data-animate ,可以将动画效果应用于切换。 使用Motion UI类,元素进出视图。 例子 (Example) 以下示例演示了在Foundation中使用toggler插件 - <!doctype html> <head> <meta name = "viewport" content =