Python、Djangoでオリジナルのシステム開発（３）

マテリアルデザインの採用

• ログイン画面、メインメニューをマテリアルデザインで装飾する
• Material Design For Bootstrap を使う

参考：マテリアルデザインを簡単に実装「Material Design for Bootstrap」 | 創kenブログ

ダウンロード： https://mdbootstrap.com/docs/jquery/getting-started/download/

tether.min.jsを別途ダウンロードしておく必要がある。

ダウンロード： TETHER.MIN.JS: DOWNLOAD - CDNPKG

ヘッダ、スクリプトの設定をする。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"> <script type="text/javascript" src="{% static 'js/tether.min.js' %}"></script> <script type="text/javascript" src="{% static 'js/mdb.min.js' %}"></script>

ログイン画面はこんな感じにできた。
時間がかかったのでメインメニューは後日。

fontawesome,RobotoはDLもできる。ネットワーク回線が使えない場合もOK。

fontawesomeのダウンロード:Font Awesome

Robotoのダウンロード:https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap

作成時の参考HP
Bootstrap4に用意されているクラス

• サイドバーを追加