I'm sure, most of you, know what django-uni-form is... For those that don't, django-uni-form is a
very cool django app that makes form management/styling/layouting a breeze. You can do pretty much anything to a form with it: Split it in formsets, add
HTML between every element, wrap different elements in different containers etc. Also, it produces great HTML, and it manages the <form> tag, as well
as the submit/reset buttons. If you aren't using it, you should definitely start.
Twitter Bootstrap is a client side framework by twitter, encompassing many aspects - layout, sane default CSS, typography,
Javascript plugins, even some icons. It looks very professional, it's easy to use and very popular. The way bootstrap styles a form is what most people need when
building or prototyping a web app. But, you need to be able to change some css classes and html elements in order to work.
Doing this with django-uni-form is extremely easy. All we need to do is change the default field template. I'll start with an example:
Bootstrap
This step is easy. Just make sure you have downloaded the Bootstrap CSS file, and that it's properly loaded.
The HTML
Simple HTML is all we need:
{% load uni_form_tags %}
<!doctype html>
<html>
<head>
<title>Django Uniform and Bootstrap</title>
<!-- LOAD BOOTSTRAP CSS HERE -->
</head>
<body>
<header class="navbar">
</header>
<div role="main" class="container">
<div class="row">
<div class="span12">
{% uni_form form form.helper %}
</div>
</div>
<hr/>
<footer>
Brainacle 2012
</footer>
</div>
<!-- LOAD BOOTSTRAP JS HERE -->
</body>
</html>
The Magic
Now, we have to tell uni-form to generate html that will be compatible with Bootstrap.
Lucky enough, uni-form provides us with the ability to override the generic field HTML template.
Just make a new file called field.html inside [template root path]/uni_form/ folder with the
following content:
{% if field.is_hidden %}
{{ field }}
{% else %}
<div class="control-group {% if field.errors %}error{% endif %}">
<label for="{{ field.auto_id }}" class="control-label">
{% if field.field.required %}<b>{% endif %}{{ field.label|safe }}{% if field.field.required %}*</b>{% endif %}
</label>
<div class="controls">
{{ field }}
{% if field.errors %}
<span class="help-inline">{% for error in field.errors %}{{ error }}<br/> {% endfor %}</span>
{% endif %}
{% if field.help_text%}
<p class="help-block">
{{ field.help_text|safe }}
</p>
{% endif %}
</div>
</div>
{% endif %}
This template handles labels, required fields, help text, errors etc. The end result looks something like this:
