Hi,
I am using Twitter Bootstrap in Django for a long time. Here are directions how
to achieve correct result.
1. Create new file for displaying forms in templates directory(e.g. forms.html)
2. In forms.html write the form displaying logic. This is just an example. You
have to set bootstrap's classes.
{% if form.non_field_errors.0 %}
<div class="alert-message block-message error">
{{ form.non_field_errors }}
</div>
{% endif %}
{% for field in form %}
{% if field.is_hidden %}
{{ field }}
{% else %}
<div class="clearfix form-item {{ field|field_type }} {% if
field.errors %}error{% endif %}">
<label for="id_{{ field.name }}">
{{ field.label }}: {% if field.field.required %}<span
class="required">*</span>{% endif %}
</label>
<div class="input">
<div class="input-wrapper">
{{ field }}
{% if field.errors %}
<ul class="help">
{% for error in field.errors %}
<li class="help-inline">{{ error|escape }}</li>
{% endfor %}
</ul>
{% endif %}
{% if field.help_text %}
<div class="help-text">
<p>{{ field.help_text }}</p>
</div><!-- /.help-text -->
{% endif %}
</div><!-- /.input-wrapper -->
</div><!-- /.input -->
</div><!-- /.clearfix -->
{% endif %}
{% endfor %}
3. In template file where you are displaying form just call form.html
{% block content %}
<form action="{% url questions_create poll.id %}" method="post">
{% csrf_token %}
{% include 'backend/partials/form.html' with form=question_form %}
<div class="clearfix">
<div class="input">
<input type="submit" class="submit" value="Uložiť">
</div><!-- /.input-->
</div><!-- /.clearfix -->
</form>
{% endblock %}
Lukas Vinclav
On Dec 12, 2011, at 8:28 AM, Victor Hooi wrote:
> Hi,
>
> I'm attempting to use Django forms with Twitter's CSS library Bootstrap
> (http://twitter.github.com/bootstrap/):
>
> The default form outputted by {{ form.as_p }} doesn't seem to be enough to be
> formatted nicely with Bootstrap.
>
> You need to add a <fieldset>, as well as class="control-label" to each
> <label>.
>
> So for example, to output a single text field:
>
> <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>
>
> Is there a way to easily get Django's form handling to produce a form like
> this? (I'd like to avoid hardcoding every form field in my template if
> possible).
>
> Cheers,
> Victor
>
> --
> You received this message because you are subscribed to the Google Groups
> "Django users" group.
> To view this discussion on the web visit
> https://groups.google.com/d/msg/django-users/-/BClad_qCrnEJ.
> To post to this group, send email to django-users@googlegroups.com.
> To unsubscribe from this group, send email to
> django-users+unsubscr...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/django-users?hl=en.
--
You received this message because you are subscribed to the Google Groups
"Django users" group.
To post to this group, send email to django-users@googlegroups.com.
To unsubscribe from this group, send email to
django-users+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/django-users?hl=en.
