プログラム関係の備忘録。技術系記事1000記事以上を目指すブログ

python:djangoとbootsrap5

  • 2021年4月14日
  • 2021年4月14日
  • python
  • 92view
  • 0件

はじめに

前回の記事から引き続き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-v5

setting.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 %}

背景が白なのでわかりにくいですがきっちり効いてますね。