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 列表中：
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 现已可在您的项目中使用！
移除旧样式
"我的网球俱乐部"项目已包含一个样式表，移除该样式表后，无样式的会员页面将如下所示：
向模板添加 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 模块。
第二行插入 <link> 元素，并指向 Bootstrap 样式表。
第三行代码插入了 `<script>` 元素，并指向所需的 JavaScript 文件。
我们还对模板中的 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>
如果您现在运行项目，成员页面将显示如下：
完成！Bootstrap 5 现在已集成到您的项目中！
了解更多关于 Bootstrap 5 的信息，请参阅我们的Bootstrap 5 教程。
