Django Bootstrap5

Bootstrap5を追加

DjangoプロジェクトでBootstrapを使用するには、主に 2つの方法があります。必要なファイルをダウンロードしてプロジェクトに含めるか、仮想環境にBootstrap5モジュールをインストールすることができます。

仮想環境にBootstrap5をインストールする2番目の方法を使用します。

Bootstrap5をインストールする

Bootstrap5が仮想環境にインストールされている必要があります。

このチュートリアルの前半で作成した既存のプロジェクト、My Tennis Clubプロジェクトにこれをインストールします。

コマンドビューを開き仮想環境フォルダに移動して、仮想環境をアクティブにします。

Scripts\activate.bat

仮想環境に入ったら、次のコマンドでBootstrap5をインストールします。

pip install django-bootstrap-v5

次のような結果が得られます。

Collecting django-bootstrap-v5
Downloading django_bootstrap_v5-1.0.11-py3-none-any.whl (24 kB)
Requirement already satisfied: django5.0,>=2.2 in c:\users\your name\myworld\lib\site-packages (from django-bootstrap-v5) (4.1.4)
Collecting beautifulsoup45.0.0,>=4.8.0
  Downloading beautifulsoup4-4.11.1-py3-none-any.whl (128 kB)
     |████████████████████████████████| 128 kB 6.4 MB/s
Requirement already satisfied: tzdata; sys_platform == "win32" in c:\users\your name\myworld\lib\site-packages (from django5.0,>=2.2->django-bootstrap-v5) (2022.7)
Requirement already satisfied: asgiref4,>=3.5.2 in c:\users\your name\myworld\lib\site-packages (from django5.0,>=2.2->django-bootstrap-v5) (3.5.2)
Requirement already satisfied: sqlparse>=0.2.2 in c:\users\your name\myworld\lib\site-packages (from django5.0,>=2.2->django-bootstrap-v5) (0.4.3)
Collecting soupsieve>1.2
  Downloading soupsieve-2.3.2.post1-py3-none-any.whl (37 kB)
Installing collected packages: soupsieve, beautifulsoup4, django-bootstrap-v5
Successfully installed beautifulsoup4-4.11.1 django-bootstrap-v5-1.0.11 soupsieve-2.3.2.post1

設定を更新

次のステップでは、settings.pyのINSTALLED_APPSリストにブートストラップモジュールを含めます。

my_tennis_club/my_tennis_club/settings.py:

INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'members', 'bootstrap5', ]

プロジェクトでBootstrap5を使用する準備が整いました。

古いスタイリングを削除

The My Tennis Clubプロジェクトには既にスタイルシートがあり、それを削除するとスタイルを適用しないメンバーページは次のようになります。

Bootstrap5をテンプレートに追加

プロジェクトでBootstrap5を使用するには、まずmaster.htmlテンプレートにコード行を挿入します。

my_tennis_club/members/templates/master.html:

<!DOCTYPE html> <html> <head> <title>{% block title %}{% endblock %}</title> {% load bootstrap5 %} {% bootstrap_css %} {% bootstrap_javascript %} </head> <body> <div class="container"> <ul class="nav bg-info"> <li class="nav-item"> <a class="nav-link link-light" href="/">HOME</a> </li> <li class="nav-item"> <a class="nav-link link-light" href="/members">MEMBERS</a> </li> </ul> {% block content %} {% endblock %} </div> </body> </html>

ご覧のとおり、次の3行を<head>セクションに挿入しました。

{% load bootstrap5 %} {% bootstrap_css %} {% bootstrap_javascript %}

最初の行は、このテンプレートでBootstrap5モジュールをロードする必要があることをDjangoに伝えます。

2行目は、<link>Bootstrapスタイルシートへの参照を含む要素を挿入します。

3行目は、<script>必要なJavaScriptファイルへの参照を含む要素を挿入します。

また、ナビゲーションバーにBootstrapクラスを挿入するなどテンプレートのHTML要素にいくつかの変更を加えました。

<div class="container"> <ul class="nav bg-info"> <li class="nav-item"> <a class="nav-link link-light" href="/">HOME</a> </li> <li class="nav-item"> <a class="nav-link link-light" href="/members">MEMBERS</a> </li> </ul> {% block content %} {% endblock %} </div>

ここでプロジェクトを実行すると、メンバーページは次のようになります。