Make組ブログ

Python、Webアプリや製品・サービス開発についてhirokikyが書きます。

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


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

前提問題

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

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

{{ form }}

するとちょっと残念な感じになる。
以前書いた過去のフォームに関する記事のフォームで 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>

こんなときは django-bootstrap-toolkit
(少なくともこれから書くときは、これを使うといいと思う。

環境

Django==1.4.1
django-bootstrap-toolkit==2.5.11

django-bootstrap-toolkit による解法

{{ form }} → {{ form|as_bootstrap }}

ワーイヽ(゚∀゚)メ(゚∀゚)メ(゚∀゚)ノワーイ


もちろん、ちゃんと README 読みましょう。

dyve/django-bootstrap-toolkit · GitHub

django-bootstrap-toolkit には他にもいろいろ使えそうなのあるので、 Django 製サイトで TwitterBootstrap 使うなら、これ使うといいと思う。

余談: project templateに適応した

以前公開した project template、 hirokiky / django-projecttemplate-ky — Bitbucketdjango-bootstrap-toolkit を追加した。この project template は

  • サクッと作り始めれる

ことを目的にしてるので、 bootstrap との相性はよいかと。

project template については下記を参考に。