Django 添加静态文件
添加 Bootstrap 5
在 Django 项目中使用 Bootstrap 有两种主要方法。要么下载所需的文件并将其包含在项目中,要么在项目中安装 Bootstrap 5 模块 虚拟环境.
我们将使用第二种方法,在虚拟环境中安装 Bootstrap 5。
安装 Bootstrap 5
Bootstrap 5 应该安装在虚拟环境中。
我们将它安装在一个现有的项目中, 我的网球俱乐部项目,在本教程前面创建。
打开命令视图,导航到虚拟环境文件夹并激活虚拟环境:
脚本\activate.bat
进入虚拟环境后,使用以下命令安装 Bootstrap 5:
pip 安装 django-bootstrap-v5
它会给你如下结果:
收集 django-bootstrap-v5
下载 django_bootstrap_v5-1.0.11-py3-none-any.whl (24 kB)
要求已满足:django<5.0,>=2.2 在 c:\users\你的名字\myworld\lib\site-packages(来自 django-bootstrap-v5)(4.1.4)
收集 beautifulsoup4<5.0.0,>=4.8.0
下载 beautifulsoup4-4.11.1-py3-none-any.whl (128 kB)
|██████████████████████████████| 128 kB 6.4 MB/s
要求已满足:tzdata;sys_platform ==“win32”在 c:\users\ 中你的名字\myworld\lib\site-packages(来自 django<5.0,>=2.2->django-bootstrap-v5)(2022.7)
要求已满足:c:\users\ 中的 asgiref<4,>=3.5.2你的名字\myworld\lib\site-packages(来自 django<5.0,>=2.2->django-bootstrap-v5)(3.5.2)
要求已满足:c:\users\ 中的 sqlparse>=0.2.2你的名字\myworld\lib\site-packages(来自 django<5.0,>=2.2->django-bootstrap-v5)(0.4.3)
收集汤筛>1.2
下载 soupsieve-2.3.2.post1-py3-none-any.whl (37 kB)
安装收集的软件包:soupsieve、beautifulsoup4、django-bootstrap-v5
成功安装beautifulsoup4-4.11.1 django-bootstrap-v5-1.0.11 soupsieve-2.3.2.post1
更新设置
下一步是将引导模块包含在 INSTALLED_APPS
列出settings.py
:
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 现在可以在您的项目中使用了!
删除旧样式
My Tennis Club 项目已经有一个样式表,将其删除,没有样式的会员页面将如下所示:
将 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>
元素与引导样式表的引用。
第三行插入 <script>
元素以及对必要 javascript 文件的引用。
我们还对模板中的 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>
如果您现在运行该项目,成员页面将如下所示:
就这样!Bootstrap 5 现在是您的项目的一部分了!
详细了解 Bootstrap 5,请访问我们的 Bootstrap 5 教程.