use bootstrap3 in django

そろそろbootstrap3を使ってみたいなと思い、Djangoでbootstrap3を使う方法を調べてみた。django-bootstrap-toolkitのページを見てみるとdjango-bootstrap3を使ってねと書いてあるので、それを使ってみることにした。

インストール

$ pip install django-bootstrap3

設定

# settings.py
INSTALLED_APPS = (
....
    'bootstrap3',
....
)

テンプレート

{% load bootstrap3 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
{% bootstrap_messages %}

これで必要ファイルがロードされる。あとはbootstrap3で使うタグで構成すれば良い。bootstrap_formとかそういうタグもあるけどまだ試していない。

Bootswatchにあるテーマを試す

まずはBootswatchのテーマcssをダウンロード

$ cd /static/css
$ wget http://bootswatch.com/cosmo/bootstrap.min.css

/staticはアプリのフォルダ下に作る

次に設定ファイルに項目を追加

# settings.py
STATIC_URL = '/static/'
BOOTSTRAP3 = {
    'css_url':'/static/css/bootstrap.min.css'
}

これだけでテンプレートいじらずに動いてくれる

bootstrap2だとnavbar表示の時に表示が重なるとか何とかあったけど、bootstrap3だと気にしなくて良いのかな？何も追加css書かなくても特に問題無さそう。これは嬉しい。

でもNavbarに画像入れると下に偏った配置になるとかあるみたいなので、調べてみる必要があるかも