Django Forms 和 Bootstrap

编程入门行业动态更新时间:2024-10-14 18:16:39

本文介绍了Django Forms 和 Bootstrap - CSS 类和 <divs>的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

我在 Django 中使用 Twitter Bootstrap 来呈现表单.>

Bootstrap 可以很好地格式化您的表单 - 只要您拥有它期望包含的 CSS 类.

但是，我的问题是 Django 的 {{ form.as_p }} 生成的表单不能很好地与 Bootstrap 一起呈现，因为它们没有这些类.

例如 Django 的输出:

<p><label for="id_name">名称:</label><input id="id_name" type="text" name="name" value="FOOBAR" maxlength="20"/></p><p><label for="id_directory">目录:</label><input id="id_directory" type="text" name="directory" value="FOOBAR" maxlength="60"/></p><p><label for="id_comment">评论:</label><textarea id="id_comment" rows="10" cols="40" name="comment">Lorem ipsum dolor sic amet.</textarea></p><p><label for="id_server">服务器:</label><选择名称="服务器" id="id_server"><option value="">---------</option><选项值="1"selected="selected">sydeqexcd01.au.db</option><option value="2">server1</option><option value="3">server2</option><option value="4">server3</option></选择></p><input type="submit" value="Submit"/></表单>

据我所知，Bootstrap 要求你的表单有一个，每个都有 class="control-label"，并且每个都被包裹在一个

中:

<label class="control-label" for="input01">文本输入</label><div class="控件"><input type="text" class="xlarge" name="input01"><p class="help-text">此处的帮助文本.请务必像这样填写，否则！</p>

</fieldset>

然而，在 Django 中为每个表单字段添加自定义 CSS 标签是相当痛苦的:

将类添加到 Django label_tag() 输出

是否有更聪明的方法来使用 {{ form.as_p }} 或遍历字段，而无需手动指定内容，或者做一大堆黑客?

干杯，维克多

解决方案

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

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

I'm using Twitter Bootstrap with Django to render forms.

Bootstrap can format your forms quite nicely - as long as you have the CSS classes it expects included.

However, my issue is that the forms generated by Django's {{ form.as_p }} don't render well with Bootstrap, as they don't have these classes.

For example, the output from 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</option> <option value="2">server1</option> <option value="3">server2</option> <option value="4">server3</option> </select> </p> <input type="submit" value="Submit" /> </form>

From what I can tell, Bootstrap requires that your forms has a <fieldset class="control-group">, each <label> has class="control-label", and each <input> is wrapped in a <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>

However, adding custom CSS labels to every form field in Django is rather painful:

Add class to Django label_tag() output

Is there a smarter way of either using {{ form.as_p }}, or iterating through the fields, without having to manually specify things, or do a whole bunch of hackery?

Cheers, Victor

解决方案

I like to use "django-crispy-forms" which is the successor to django-uni-form. It's a great little API and has great support for Bootstrap.

I tend to use the template filters for quickly porting old code and quick forms, and the template tags when I need more control over the rendering.

更多推荐

Django Forms 和 Bootstrap

本文发布于:2023-11-07 00:35:08，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/34/1565071.html