【Django】DjangoでBootstrapを使えるようにする3ステップ
はじめに
Webアプリで大事な要素の一つは見た目、見栄えではないでしょうか。
ただ、私のようにデザインがよく分からないという方も多いはず。
そんなエンジニアを救ってくれるのがBootstrapというわけです。
#Webアプリ開発の達人である友人に教えてもらい、つい最近知りました。
BootstrapはCSSの「フレームワーク」で、
デザインが得意なとてもありがたい方々が用意してくれています。
今回私は、HonokaというBootstrapを使いました。
honokak.osaka
ということで、これをDjangoで使えるようにします。
やったこと
前回の記事の環境をもとに書きます。
qstairs.hatenablog.com
作業としては以下の3ステップで使えるようになりました。
- Bootstrapのダウンロード
- 必要なものをコピー
- ソースを修正
Bootstrapのダウンロード
まず、以下からzipファイルをダウンロードし、解凍します。
Release Honoka v3.3.7-a · windyakin/Honoka · GitHub
解凍後のフォルダ構成は以下になります。
honoka ├── README.md ├── bootstrap.html ├── css ├── fonts └── js
必要なものをコピー
まず、staticフォルダを作成し、
そこにcss,fonts,jsフォルダをコピーします。
コピー後のフォルダ構成
├── bin ├── blog │ ├── __pycache__ │ ├── migrations │ └── templates ├── include ├── lib │ └── python3.6 ├── myapp │ └── __pycache__ └── static #作成 ├── css #コピー ├── fonts #コピー └── js #コピー
ソースを修正
準備ができたところで、ソースを修正します。
Bootstrapを使用するために必要な修正は2ファイルです。
1. myapp/settings.py
: : STATIC_URL = '/static/' # 追加 start STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static'), ] # 追加 end
2. blog/templates/blog/post_list.html
※post_list.htmlは、ダウンロードしたzipファイル内にあった「bootstrap.html」で上書きしています。
: {% load staticfiles %} <link rel="stylesheet" type="text/css" href="{% static "css/bootstrap.css" %}"> (略) <script src="{% static "js/bootstrap.min.js" %}"></script> :
こんな感じでちゃんと表示できました。
最後に
最初いろんなサイトを見ましたが、
情報が錯綜していて一体どれが正しいのかわかりませんでした。
試行錯誤により、今回紹介した方法でBootstrapを使用できることがわかりました。
フタを開けてみれば大した修正なく使えるようで、
今後どんどん使っていこうと思います。
以上