2020-04-01 作成: windows10/Python-3.8.2-amd64/Django-3.0.4/MDB-Free_4.15.0

Django で MDB(material desing bootstrap) を使って、カッコいいマテリアルデザインにしようとしました。
しかし、設定で少し時間を使ってしまったので、忘れないように書いておきます。
Django プロジェクト mysite の中にあるアプリケーション memo のスタイルを設定するという説明です。

Django の使い方に詳しくない人はこちら

static の設定

static フォルダの作成

アプリ memo のディレクトリの中に/mysite/memo/static/memoディレクトリを作る。
Django では css や js などの静的なファイルの置き場は、/static/ にするらしい。

MDB-Free_4.15.0.zip をダウンロードしてきて、/static/ に解凍する。
https://mdbootstrap.com/docs/jquery/getting-started/download/

mysite/
  mysite/
  memo/
    __pycache__/
    migrations/
    templates/
      memo/
    static
      memo/           <- この下に MDB を解凍
        css/
        img/
        js/
        scss/
        src/

/mysite/mysite の settings.py の中で static ディレクトリの置き場を指定する。とはいっても、デフォルトで STATIC_URL = '/static/' となっているので、特に変更しなかった。

テンプレートの編集

MDB を導入するためにテンプレートの html ファイルを書き換える。

具体的な手順

テンプレートの先頭に{% load static %}と書く
一番最初の行がよいみたい
<head> に MDB の設定を書く
meta 要素でブラウザ互換性とレスポンシブデザインを指定
<head> で link でスタイルシートを読み込む
パス指定は {% static 'memo/css/bootstrap.min.css' %} のようにする
<body> の最後で js ファイルを読み込む
パス指定は {% static 'memo/js/jquery.min.js' %} のようにする
あとは、<div> で、スタイルの設定を指定
ここは普通の bootstrap の使い方と同じ

書き換えられたテンプレートの例

memo/template/memo/memo_list.html

{% load static %}
<!DOCTYPE html>
<html lang = "jp">
<head>
  <meta charset = "utf-8">
  <title>Memo</title>

  <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
  <meta http-equiv = "x-ua-compatible" content = "ie = edge">
  <link href = "{% static 'memo/css/bootstrap.min.css' %}" rel = "stylesheet">
  <link href = "{% static 'memo/css/mdb.min.css' %}" rel = "stylesheet">
  <link href = "{% static 'memo/css/style.css' %}" rel = "stylesheet">
<head>

<body>
  <div class = "container">
    <div class = "row">
      <div class = "col-md-8">
        <h1>View : MemoListView</h1>
        <p>Template : memo_list.html</p>
      </div>
    </div>
    <div class = "row">
      <div class = "col-md-12">
        {% if memo_list %}
        <table class = "table">
          {% for memo in memo_list %}
          <tr>
            <td><a href = "{% url 'site_detail' memo.pk %}">{{ memo.text }}</a></td>
            <td><a href = "{% url 'site_update' memo.pk %}">Edit</a></td>
            <td><a href = "{% url 'site_delete' memo.pk %}">Delete</a></td>
          </tr>
          {% endfor %}
        </table>

        {% else %}
        <p>No memo available.</p>
        {% endif %}
      </div>
    </div>
    <div = "row">
      <div = "col-md-8">
          <p><a href = "{% url 'site_create' %}">Create a new memo.</a></p>
      </div>
    </div>
  </div>
  <script type = "text/javascript" src = "{% static 'memo/js/jquery.min.js' %}"></script>
  <script type = "text/javascript" src = "{% static 'memo/js/popper.min.js' %}"></script>
  <script type = "text/javascript" src = "{% static 'memo/js/bootstrap.min.js' %}"></script>
  <script type = "text/javascript" src = "{% static 'memo/js/mdb.min.js' %}"></script>

</body>
</html>

余談

bootstrap をとにかく使ってみる、というなら、基本的なルールを 3 つだけ覚えておけば最初は何とかなる。
material design bootstrap なら、これだけで結構まともな見栄えになる。

まず body の本文部分全体を <div class = "container"> でくくる
1 つの行に入れて横に並べたいものを <div class = "row"> でくくる
1 つの行で横に並べるものそれぞれを <div class = "col-md-数字">でくくり、数字の合計が 12 になるようにする

おしまい