Bootstrapでフロントエンド開発

PostモデルのCreateViewとListViewを追加したことによって、テンプレートが2つできましたので、見た目もちょっとカスタマイズしていきましょう。フロントエンド開発(HTML, CSS, JS)が簡単にできるBootstrapのフレームワークを使いたいと思います。

まずは、Djangoのサードパーティーアプリのdjango-bootstrap3をインストールします。CDNのリンクを直接テンプレートに追加してBootstrapを使用する方法もありますが、専用のアプリをインストールするとDjangoにBootstrapのテンプレートタグが追加されますので大変便利です。


pip install django-bootstrap3

settings.pyファイルを開いて、INSTALLED_APPSのリストの一番最後に’bootstrap3′,を追加します。

ベーステンプレートを作成しましょう。ベーステンプレートを使用することによって、css、JSファイルのインポートやヘッダー、フッター部分などの共有されるパーツを一か所にまとめることができます。forum/templates/forum内にbase.htmlというファイルを作成し、以下のコードを入力します。


{% load bootstrap3 %}

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        {% bootstrap_css %}
        {% bootstrap_javascript %}
    </head>
        <body>
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        {% block content %}{% endblock %}
                    </div>
                </div>
            </div>
        </body>
    </html>

今度はforum/templates/forum/post_form.htmlとforum/templates/forum/post_list.htmlを開いて、ファイルの1行目に{% extends “forum/base.html” %}を追加し、以前入力したコードを{% block content %}…{% endblock %}で囲みます。これをすることによってpost_list.htmlとpost_form.htmlはベーステンプレートのbase.htmlを使用し、base.htmlに追加したコードはすべてpost_list.htmlとpost_form.htmlにも追加されます。

{% extends "forum/base.html" %}

{% block content %}
既存のコード
{% endblock %}

早速Bootstrapを使ってpost_list.htmlの見た目をBootstrapのPanel(http://getbootstrap.com/components/#panels)を使用して変えましょう。forループ内のコードを以下のように編集。

{% for post in object_list %}
    <div class="panel panel-default">
        <div class="panel-body">
            <div><small>{{ post.date_created }}</small></div>
            <div>{{ post.title }}</div>
            <div>{{ post.body }}</div>
        </div>
    </div>
{% empty %}
    <div>No posts yet</div>
{% endfor %}

post_form.htmlも見た目を変えましょう。2行目に{% load bootstrap3 %}を追加して、

内のコードを以下のように編集します。先ほどdjango-bootstrap3のアプリをインストールしたので、{% bootstrap_form %}や{% buttons %}のテンプレートタグを使用できるようになりました。

<form method="post" action=".">
{% csrf_token %}
{% bootstrap_form form %}
    {% buttons %}
        <button type="submit" class="btn btn-primary">
            {% bootstrap_icon "star" %} Submit
        </button>
    {% endbuttons %}
</form>

gitコミットを作成して、プッシュしましょう

git status
git add .
git commit -m "installing and implementng bootstrap"
git push origin master