Django 汎用クラスビューで bootstrap を使う方法

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 の使い方に詳しくない人はこちら](https://qiita.com/taiyaki/items/352d36cda37af74eb826)


# 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 の使い方と同じ

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

```html: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 になるようにする 



おしまい