整合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里面加入如下调用：

<script src="//upcdn.b0.upaiyun.com/libs/jqueryui/jquery.ui-1.9.0.min.js"></script> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- 引入 Bootstrap --> <link href="http://apps.bdimg.com/libs/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <script type="text/javascript" src="{% static 'bootstrap/js/bootstrap.js' %}"></script> <style type="text/css" src="{% static 'bootstrap/css/bootstrap.css' %}"></style>

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

第四步:测试

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

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

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