環境:

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/

整合django和bootstrap框架