DjangoでBootstrapを使う時にすること
概要
Djangoのアプリを作り始めるときに行うことの一つ、Bootstrapの設定について記します。
対象OSはWindowsです。
VisualStudioCode（以下 VSCode）を使用します。
以下の手順で作成します。
- django-bootstrapのインストール
- settings.pyへ登録
- ベーステンプレートを作る
- テンプレートの作成
- views.pyの作成
環境の作成は以下を参照して下さい。
事前に以下の設定を行っているものとします。
django-bootstrapのインストール
django-bootstrap5 を仮想環境内にインストールします。
(venv) PS C:\ws\sample> pip install django-bootstrap5
Collecting django-bootstrap5
Downloading django_bootstrap5-22.2-py3-none-any.whl (24 kB)
Requirement already satisfied: Django>=3.2 in c:\ws\sample\venv\lib\site-packages (from django-bootstrap5) (4.1.5)
Requirement already satisfied: asgiref<4,>=3.5.2 in c:\ws\sample\venv\lib\site-packages (from Django>=3.2->django-bootstrap5) (3.6.0)
Requirement already satisfied: tzdata in c:\ws\sample\venv\lib\site-packages (from Django>=3.2->django-bootstrap5) (2022.7)
Requirement already satisfied: sqlparse>=0.2.2 in c:\ws\sample\venv\lib\site-packages (from Django>=3.2->django-bootstrap5) (0.4.3)
Installing collected packages: django-bootstrap5
Successfully installed django-bootstrap5-22.2
settings.pyへ登録
django-bootstrap5をsettings.pyへ登録します。
project\setings.py
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
+ 'django_bootstrap5',
'app01',
]
ベーステンプレートを作る
これから作成するhtmlの共通部分をベーステンプレートとして作成します。
これ以降作成するテンプレートはこのベーステンプレートを継承して作成します。
app01\templates\app01\base.html
{% load django_bootstrap5 %}
<!DOCTYPE html>
<html lang="ja">
<head>
<title>{{title}}</title>
<meta charset="utf-8">
{% bootstrap_css %}
{% bootstrap_javascript %}
</head>
<body>
{% block content %}
{% endblock content %}
</body>
</html>
テンプレートの作成
ベーステンプレートを継承するようにテンプレートファイルへ記載します。
app01\templates\app01\index.html
{% extends 'app01/base.html' %}
{% block content %}
<div class="bg-primary text-white">
{{text}}
</div>
{% endblock content %}
views.pyの作成
ベーステンプレートにタイトルをつけたのでその分の記載を追加します。
app01\views.py
from django.shortcuts import render
# Create your views here.
def index(request):
message = {
'title':'app01',
'text':'Hello',
}
return render(request, 'app01/index.html', message)
これでBootstrapが使えるようになります。
