Django集成Bootstrap 3完整指南：从下载到页面渲染

一颗松果

发布时间：2026-10-12| 4人浏览过

原创

本文详细介绍在Django项目中引入Bootstrap 3的完整流程。涵盖从官方下载源码包、配置STATIC_URL和TEMPLATES目录，到复制CSS/JS资源、修改HTML引用路径以及利用模板继承创建首页的具体操作步骤。通过清晰的代码示例和目录结构说明，帮助开发者快速实现Django与Bootstrap的无缝集成。

一、下载bootstrap

访问Bootstrap 3官方文档页面 https://v3.bootcss.com/getting-started/#download，选择下载带有源码的Bootstrap版本。由于Django项目对静态资源管理的封闭性要求，建议仅通过此官方渠道获取源码进行集成。

下载解压后的目录结构如下所示：

其中，dist文件夹包含了Bootstrap的核心文件，是后续配置的关键资源。

二、创建一个简单Demo项目

1. 在项目根目录下新建一个static目录，并在其内部创建名为bootstrap的子文件夹，用于存放前端资源。

2. 在根目录下同时创建一个templates目录，专门用于存放HTML模板文件。

3. 打开settings.py文件，在文件末尾添加静态文件配置（注意符号使用）：

STATIC_URL = '/static/'
STATICFILES_DIRS = ( os.path.join('static'), )
STATIC_ROOT = ''

4. 在settings.py中找到TEMPLATES配置项，修改其中的'DIRS'字段，指定模板目录路径。

注意：BASE_DIR变量指向manage.py文件所在的根目录路径，确保路径拼接正确。

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, "templates")],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

5. 找到应用目录下的view.py文件，编写如下视图函数：

#视图函数,返回index.html页面 
from django.http import HttpResponse 
from django.shortcuts import render 
def index(request): 
    return render(request, 'index.html')

6. 在项目根路由urls.py文件中配置如下URL映射：

from django.urls import path
from App import views
 
urlpatterns = [
    # 首页
    path('user/', views.index, name="index"),
]

此时视图函数与路由已配置完毕，接下来开始部署Bootstrap资源。

三、配置bootstrap

1. 打开步骤一中下载的Bootstrap源码包，进入dist文件夹，将其中的css、fonts、js三个子文件夹全部复制到项目的/static/bootstrap目录下。

2. 从下载的源码包中找到docs/examples/blog/目录下的index.html文件，将其复制到项目步骤二中创建的/templates/目录下，并将文件名重命名为base.html。

3. 将base.html中的CSS引用路径：<link href="../../dist/css/bootstrap.min.css" rel="stylesheet"> 修改为：<link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet">

4. 将base.html中的自定义CSS引用路径：<link href="blog.css" rel="stylesheet"> 修改为：<link href="/static/bootstrap/css/blog.css" rel="stylesheet">

5. 将base.html中的Bootstrap JS脚本引用路径：<script src="../../dist/js/bootstrap.min.js"></script> 修改为：<script src="/static/bootstrap/js/bootstrap.js"></script>