Django Bootstrap4を導入する

Djangoで作成したアプリにbootstrap4を導入したので、やり方をメモしておきます。

1.djang-bootstrap4の設定をsettings.pyに記述する。

settings.pyにbootstrap用の設定を追記しておきます。

INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'bootstrap4',
'member_reg',
]

…中略…

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',
            ],
            #Bootstarapの設定を追加
            'builtins':[ 
                'bootstrap4.templatetags.bootstrap4',
            ],
        },
    },
]

2.bootstrap4をダウンロードし、staticフォルダに必要なファイルを格納しておく。

bootstrap4公式サイトから必要なファイルをダウンロードします。

zipを解凍し、Djangoアプリケーションのstaticフォルダ配下に以下のように格納しておきます。

static
└─XXXXXXX      …アプリケーションのフォルダ
   ├─css
   │   bootstrap.min.css
   │   bootstrap.min.css.map
   │   style.css
   │   
   └─js
       bootstrap.bundle.min.js
       bootstrap.bundle.min.js.map
       jquery-3.4.1.js
       jquery-3.4.1.min.map

3.htmlでbootstrapのファイルを読み込む。

HTMLファイル(ここではbase.htmlを作っています)にbootstrap4のcssとjsを読み込みます。

下記の7、8、18、19行目が該当します。

{% load i18n static %}
<!DOCTYPE html>{% get_current_language as LANGUAGE_CODE %}
<html lang="{{ LANGUAGE_CODE|default:"en-us" }}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="{% static 'member_reg/css/style.css' %}" >
<link rel="stylesheet" href="{% static 'member_reg/css/bootstrap.min.css' %}">
{% block extra_css %}{% endblock %}
<title>{% block title %}XX{% endblock %}</title>
</head>
<body>
  <div class="container">
    {% block content %}
      {{ content }}
    {% endblock %}
  </div>
<script src="{% static 'member_reg/js/jquery-3.4.1.js' %}"></script>
<script src="{% static 'member_reg/js/bootstrap.bundle.min.js' %}"></script>
{% block extra_js %}{% endblock %}
</body>
</html>

設定は以上です。

試しにbootstrap4が提供するButtonを適用すると以下のようになります。

 

開発環境

Windows10
Python 3.7.3
Django 2.2
Visual Studio Code 1.41.1