Make組ブログ(移行して http://blog.hirokiky.org/ にあるよ) RSSフィード Twitter

2012-10-27

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


f:id:hirokiky:20121027190709p:image:w300
Django 製サイトで TwitterBootstrap を使いたいときはdjango-bootstrap-toolkit を使うのがオススメ。


前提問題

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

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

{{ form }}


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

f:id:hirokiky:20121027190710p:image:w300

(●・̆⍛・̆●)

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 }}


f:id:hirokiky:20121027190711p:image:w360

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


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

no title

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

余談: project templateに適応した


以前公開した project template、 no titledjango-bootstrap-toolkit を追加した。この project template は

  • サクッと作り始めれる

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

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

トラックバック - http://d.hatena.ne.jp/hirokiky/20121027/1351335016