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 のスタイルを設定するという説明です。
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 の使い方と同じ
書き換えられたテンプレートの例
{% 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 になるようにする
おしまい