1. はじめに

今回はDjangoにBootstapを導入する方法を紹介します。
また、Bootstap導入後に前回の「DjangoのWebアプリケーションにユーザ認証を追加する(django-allauth)」で作成したログイン画面に適用していきます。

2. django-bootstrap5をインストール

pipでdjango-bootstrap5をインストールします。

pip install django-bootstrap5

3. settings.pyの変更

settings.pyのINSTALLED_APPSにdjango_bootstrap5を追加します。

INSTALLED_APPS = [
    ...
    'django_bootstrap5', # 追加
]

4. テンプレートに適用

テンプレートの先頭行に下記のコードを追加します。

{% load django_bootstrap5 %}

テンプレートのヘッダに下記のコードを追加します。

<head>
    ...
    {% bootstrap_css %}
    {% bootstrap_javascript %}
</head>

これでBootstrapの導入は完了になります。

5. django-allauthのテンプレートをカスタマイズ

django-allauthのテンプレートファイルをカスタマイズするにはdjango-allauthのテンプレートファイルを自身のtemplatesの下にコピーして編集します。
django-allauthの場所はpip showコマンドで確認できます。Locationに記載されているのがインストールされているパスになります。

$ pip show django-allauth
Name: django-allauth
Version: 0.51.0
Summary: Integrated set of Django applications addressing authentication, registration, account management as well as 3rd party (social) account authentication.
Home-page: http://www.intenct.nl/projects/django-allauth/
Author: Raymond Penners
Author-email: raymond.penners@intenct.nl
License: UNKNOWN
Location: /home/vagrant/.local/lib/python3.8/site-packages
Requires: requests-oauthlib, Django, requests, python3-openid, pyjwt
Required-by:

6. Bootstrap適用後の画面

Bootstrapを適用し、django-allauthのテンプレートをカスタマイズした結果は以下のようになります。

ログイン画面

ユーザ登録画面

パスワード再設定画面

7. おわりに

今回はDjangoにBootstrapを導入し、デザインを改良しました。
今後もDjangoについて勉強した内容を投稿していきたいと思います。