由于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/