Bootstrap template 无法正常工作 Django

qq^^614136809

于 2024-02-21 10:40:37 发布

阅读量387

点赞数 9

文章标签： bootstrap django 前端

本文链接：https://blog.csdn.net/D0126_/article/details/136205731

版权

本文详细介绍了在Django项目中使用Bootstrap模板时可能遇到的资源文件加载问题，提供了配置静态文件、放置资源文件、在模板中加载资源以及使用collectstatic命令的解决方案。

摘要由CSDN通过智能技术生成

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/ 来查看项目了。

qq^^614136809

关注

9
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap template 无法正常工作 Django

但是在 Django 中使用 Bootstrap 模板时，可能会遇到问题。本文将介绍如何解决使用 Bootstrap 模板时遇到的问题。通常情况下，使用 Bootstrap 模板时遇到的问题都是由于资源文件（CSS、JS、字体等）没有正确加载导致的。将 Bootstrap 的资源文件（CSS、JS、字体等）放到 Django 项目的静态文件夹中。下面是一个完整的 Django 项目的示例，其中使用了 Bootstrap 模板。文件中，配置静态文件设置。在 Django 模板中，可以使用。
复制链接

扫一扫