はじめに
前回の記事から引き続きpythonのチュートリアルを進めています。
今回は昔からあるbootstrapの最新バージョン5.xをdjangoで使いたいときの手順をメモします。
準備
bootstrapのcssとjsを入手
https://getbootstrap.com/docs/5.0/getting-started/download/
jQueryも入手
https://jquery.com/download/
jdangoのアプリケーション配下に作ったstaticディレクトリ内にそれぞれ配置します。
普通にビュー部分の成形などはこれだけでいける(参照先を設定後)と思うのですが、フォームなどは別にライブラリが必要なよう。
bootstrap5に対応したpythonライブラリはこちら
https://pypi.org/project/django-bootstrap-v5/
pipでインストール
pip install django-bootstrap-v5setting.pyに追加
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
"bootstrap5",
]使ってみる
テンプレートのhtml
{% 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 'cms/css/bootstrap.min.css' %}">
{% block extra_css %}{% endblock %}
<title>{% block title %}My books{% endblock %}</title>
</head>
<body>
<div class="container-fluid">
{% block content %}
{{ content }}
{% endblock %}
</div>
<script src="{% static 'cms/js/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'cms/js/bootstrap.bundle.min.js' %}"></script>
{% block extra_js %}{% endblock %}
</body>
</html>該当するページ
{% extends "cms/base.html" %}
{% block title %}テストページ{% endblock title %}
{% block content %}
<div class="container">
<h4 class="mt-4">テストページ</h4>
</div>
{% endblock content %}背景が白なのでわかりにくいですがきっちり効いてますね。