TaaQi Diary

エンジニア大学院生TaaQiのほのぼのした日常を綴ります。

Djangoに Bootstrap4 を導入して楽をしよう

こんにちは、たーき( @Taaaqiii ) です。

Djangoを使って過去に作ったWebアプリケーションを言語バージョンアップとリファクタリングをしているときに、
以前は長いCSSを書いていたのですが、CSSフレームワークをしようしてコードの量を減らそうと思いました。

そこで、今後のアプリ制作で楽をするために、Bootstrapを使ってみようと思います。

環境

Python 3.7.6
Django 3.0.2
django-bootstrap4 1.1.1

導入手順

まずはdjangoでbootstrap4の導入を簡単にしてくれるライブラリの django-bootstrap4 をpipインストールします。

$  pip install django-bootstrap4

Collecting django-bootstrap4
  Downloading django_bootstrap4-1.1.1-py3-none-any.whl (26 kB)
Collecting beautifulsoup4
  Downloading beautifulsoup4-4.8.2-py3-none-any.whl (106 kB)
     |████████████████████████████████| 106 kB 11.9 MB/s 
Collecting soupsieve>=1.2
  Downloading soupsieve-1.9.5-py2.py3-none-any.whl (33 kB)
Installing collected packages: soupsieve, beautifulsoup4, django-bootstrap4
Successfully installed beautifulsoup4-4.8.2 django-bootstrap4-1.1.1 soupsieve-1.9.5

続いて、Djangoの manage.py と同階層 にある setting.py の
INSTALLED_APPS, TEMPLATESのOPTIONS に bootstrap4 を追加します。

# Application definition

INSTALLED_APPS = [
    'study.apps.StudyConfig',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'bootstrap4', #<--ここに追加
]

~~~~~~~~~~
~~~~~~~~~~

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
            'builtins':[ 
                'bootstrap4.templatetags.bootstrap4', #<--ここに追加!
            ],
        },
    },
]

最後に、テンプレート(base.html)のでbootstrapの CSSjavaScriptを読み込む処理を追加します。

    <head>
        <title>AppName</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        {% bootstrap_css %} <!-- ここを追加 -->
        {% bootstrap_javascript jquery='full' %} <!-- ここを追加 -->
    </head>

Bootstrap4の使用実例

例えば以下のようにhtmlにナビバーを記述すると、

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav4" aria-controls="navbarNav4" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href="#">AppName</a>
            <div class="collapse navbar-collapse">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">マイページ</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">ユーザ情報</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">ログイン</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">ログアウト</a>
                    </li>
                </ul>
            </div>
        </nav>    

このような表示にしてくれます。

f:id:TaaQi:20200131202203p:plain
navbar