Bootstrap5を追加
DjangoプロジェクトでBootstrapを使用するには、主に 2つの方法があります。必要なファイルをダウンロードしてプロジェクトに含めるか、仮想環境にBootstrap5モジュールをインストールすることができます。
仮想環境にBootstrap5をインストールする2番目の方法を使用します。
Bootstrap5をインストールする
Bootstrap5が仮想環境にインストールされている必要があります。
このチュートリアルの前半で作成した既存のプロジェクト、My Tennis Clubプロジェクトにこれをインストールします。
コマンドビューを開き仮想環境フォルダに移動して、仮想環境をアクティブにします。
仮想環境に入ったら、次のコマンドでBootstrap5をインストールします。
pip install django-bootstrap-v5
次のような結果が得られます。
Collecting django-bootstrap-v5Downloading 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/sRequirement 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-v5Successfully 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>
ここでプロジェクトを実行すると、メンバーページは次のようになります。
これで完了し、Bootstrap5がプロジェクトの一部になりました!
Bootstrap5の詳細については、Bootstrap5チュートリアルを参照してください。
