django和bootstrap框架整合的实例教程

为了方便快速开发项目，我打算将django和bootstrap框架整合到一起，下面是整合过程。

环境:
python版本:2.7.8
django版本:1.7.1
bootstrap版本:3.3.0

首先github上面有两个开源的项目用来整合django和bootstrap.
https://github.com/dyve/django-bootstrap-toolkit 对应的是bootstrap 2.0版本
https://github.com/dyve/django-bootstrap3 对应的是bootstrap 3.0版本

但是使用这个插件的话,会增加额外的学习成本,所以我们选用原生的方式调用bootstrap.

由于bootstrap就是一堆css和js以及字体文件,并且属于静态资源,所以我们只需要配置好django的访问路径,能够让template里面的代码访问到bootstrap相关的文件即可.

第一步：下载bootstrap文件,

http://v3.bootcss.com/getting-started/

然后将本件解压以后,放到django框架的目录中.
我的放置位置如下.
如果我们的django项目叫做python_web,项目里面有个应用叫做blog.
那么我们需要在python_web下面创建一个static目录,然后在static目录下面创建一个bootstrap目录.将解压后的bootstrap/dist里面的内容放到/static/bootstrap/里面.
完整的路径如下:

D:\PYTHON_WEB
├─blog
│  ├─migrations
│  └─static
│      └─img
├─python_web
├─static
│  ├─bootstrap
│  │  ├─css
│  │  ├─fonts
│  │  └─js
│  └─img
└─templates
    └─blog
        └─img

第二步:调整django框架配置

修改settings.py文件.
确认是否已一下几行.
BASE_DIR = os.path.dirname(os.path.dirname(__file__))

INSTALLED_APPS元组里面是否有
‘django.contrib.staticfiles’,

STATIC_URL = ‘/static/’

STATICFILES_DIRS = (
os.path.join(BASE_DIR, “static”),
)

第三步:在template中调用bootstrap

需要在django相关的模板文件中加入一下内容来实现对bootstrap的调用
文件开始加入:

{% load staticfiles %}

然后在head或者body里面加入以下调用：

 
 
 
 
 
 
 
 

这样就可以使用bootstrap的相关功能了.

第四步:测试

http://v3.bootcss.com/examples/theme/

拷贝这个页面的源码到你的template里面,修改和替换第三步中提到的内容,看看是否达到效果了.
尝试使用bootstrap的自动化布局,看看是否有效.

http://www.bootcss.com/p/layoutit/