Bootstrap 是一个流行的 CSS 框架,可用于快速创建响应式网站。但是在 Django 中使用 Bootstrap 模板时,可能会遇到问题。本文将介绍如何解决使用 Bootstrap 模板时遇到的问题。
2、解决方案
通常情况下,使用 Bootstrap 模板时遇到的问题都是由于资源文件(CSS、JS、字体等)没有正确加载导致的。为了解决此问题,可以采取以下步骤:
-
将资源文件放在静态文件夹中
将 Bootstrap 的资源文件(CSS、JS、字体等)放到 Django 项目的静态文件夹中。静态文件夹通常位于项目根目录下的static
文件夹中。 -
配置静态文件设置
在 Django 项目的settings.py
文件中,配置静态文件设置。添加以下代码:# Static files (CSS, JavaScript, Images) # https://docs.djangoproject.com/en/2.1/howto/static-files/ http://www.jshk.com.cn/mb/reg.asp?kefu=xiaoding;//爬虫IP免费获取; STATIC_URL = '/static/' STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles') # Extra places for collectstatic to find static files. STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static'), ]
-
在模板中加载资源文件
在 Django 模板中,可以使用{% load static %}
标签来加载静态文件。例如,要加载 Bootstrap 的 CSS 文件,可以使用以下代码:{% load static %} <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
-
收集静态文件
在部署 Django 项目之前,需要使用collectstatic
命令收集静态文件。此命令将把所有静态文件复制到STATIC_ROOT
文件夹中。python manage.py collectstatic
3、代码例子
下面是一个完整的 Django 项目的示例,其中使用了 Bootstrap 模板。
- 项目目录结构
myproject/
├── manage.py
├── myproject/
│ ├── __init__.py
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
├── static/
│ ├── css/
│ │ └── bootstrap.min.css
│ ├── js/
│ │ └── bootstrap.min.js
│ └── fonts/
│ └── glyphicons-halflings-regular.woff
├── templates/
│ ├── base.html
│ └── index.html
- settings.py
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.1/howto/static-files/
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
# Extra places for collectstatic to find static files.
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
- base.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website</title>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
</head>
<body>
{% block content %}
{% endblock %}
<script src="{% static 'js/bootstrap.min.js' %}"></script>
</body>
</html>
- index.html
{% extends 'base.html' %}
{% block content %}
<h1>Hello, world!</h1>
{% endblock %}
- 运行项目
python manage.py runserver
然后,就可以在浏览器中访问 http://127.0.0.1:8000/ 来查看项目了。