Qstairs

現役AIベンチャーCTOの知見、画像認識（人工知能、Deep Learning）を中心とした技術ノウハウをアップしていきます

広告

【Django】DjangoでBootstrapを使えるようにする3ステップ

IT Django python

f:id:qstairs:20160601221351j:plain

はじめに

Webアプリで大事な要素の一つは見た目、見栄えではないでしょうか。
ただ、私のようにデザインがよく分からないという方も多いはず。
そんなエンジニアを救ってくれるのがBootstrapというわけです。
#Webアプリ開発の達人である友人に教えてもらい、つい最近知りました。

BootstrapはCSSの「フレームワーク」で、
デザインが得意なとてもありがたい方々が用意してくれています。

今回私は、HonokaというBootstrapを使いました。
honokak.osaka

ということで、これをDjangoで使えるようにします。

やったこと

前回の記事の環境をもとに書きます。
qstairs.hatenablog.com

作業としては以下の3ステップで使えるようになりました。

  1. Bootstrapのダウンロード
  2. 必要なものをコピー
  3. ソースを修正

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


こんな感じでちゃんと表示できました。
f:id:qstairs:20170504152226p:plain

最後に

最初いろんなサイトを見ましたが、
情報が錯綜していて一体どれが正しいのかわかりませんでした。
試行錯誤により、今回紹介した方法でBootstrapを使用できることがわかりました。
フタを開けてみれば大した修正なく使えるようで、
今後どんどん使っていこうと思います。

以上

広告