Django - 新增靜態檔案
新增 Bootstrap 5
在 Django 專案中使用 Bootstrap 有兩種主要方法。一種是下載所需檔案並將其包含在專案中，另一種是在您的虛擬環境中安裝 bootstrap 5 模組。
我們將使用第二種方法，在虛擬環境中安裝 Bootstrap 5。
安裝 Bootstrap 5
Bootstrap 5 應安裝在虛擬環境中。
我們將把它安裝到現有專案中，即本教程前面建立的“我的網球俱樂部”專案。
開啟命令提示符，導航到虛擬環境資料夾並激活虛擬環境
Scripts\activate.bat
進入虛擬環境後，使用此命令安裝 Bootstrap 5
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: django<5.0,>=2.2 in c:\users\your name\myworld\lib\site-packages (from django-bootstrap-v5) (4.1.4)
Collecting beautifulsoup4<5.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 django<5.0,>=2.2->django-bootstrap-v5) (2022.7)
Requirement already satisfied: asgiref<4,>=3.5.2 in c:\users\your name\myworld\lib\site-packages (from django<5.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 django<5.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 列表中包含 bootstrap 模組
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',
]Bootstrap 5 現在可以在您的專案中使用！
移除舊的樣式
“我的網球俱樂部”專案已經有一個樣式表，請將其移除，沒有樣式的 Members 頁面將如下所示
將 Bootstrap 5 新增到模板
要使用專案中的 Bootstrap 5，請首先在 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>正如您所見，我們在 <head> 部分插入了這三行
{% load bootstrap5 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
第一行告訴 Django 在此模板中載入 Bootstrap 5 模組。
第二行插入帶有 bootstrap 樣式表引用的 <link> 元素。
第三行插入帶有必要 javascript 檔案引用的 <script> 元素。
我們還對模板中的 HTML 元素進行了一些更改，例如為導航欄插入了 bootstrap 類
<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>
如果現在執行專案，members 頁面將如下所示
就是這樣！Bootstrap 5 現已成為您專案的一部分！
在我們的Bootstrap 5 教程中瞭解更多關於 Bootstrap 5 的資訊。
