DjangoでTwitterBootstrap使うならdjango-boostrap-toolkitがオススメ

Django 製サイトで TwitterBootstrap を使いたいときはdjango-bootstrap-toolkit を使うのがオススメ。

前提問題

今回はとくにフォームについて取り上げる。

例えば bootstrap を使っているテンプレート内で、以下のように単純にフォームを扱う

{{ form }}

するとちょっと残念な感じになる。
以前書いた過去のフォームに関する記事のフォームで bootstrap を導入して、フォームに値を入れずに送信してみると以下のように。

(●･̆⍛･̆●)

bootstrap でフォームはもっとかっこ良く扱える

Bootstrap

bootstrap において (一般的にかもしれないけど) フォームは control-group などを使うといい感じにしてくれる。

<div class="control-group error required">
  <label class="control-label" for="0">Label</label>
  <div class="controls">
    <input id="0" type="text" name="value" maxlength="255" />
    <p class="help-block error">This field is required.</p>
  </div>
</div>

でもテンプレート内で {{ form }} でそのまま書いちゃうと上記のようにはできないし、かといって以下のようには書きたくない。

<div class="control-group error required">
  <label class="control-label" for="0">{{ form.some_field.label }}</label>
  <div class="controls">
    {{ form.some_field }}
    <p class="help-block error">{{ form.some_field.errors.as_text }}</p>
  </div>
</div>