环境:

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框架的更多相关文章

  1. 整合Django的信息显示框架messages framework

    ##主要用在view.login函数,不管登录是否成功,都会设置message变量,然后在login.html显示 from django.contrib import messages#需要导的包 ...

  2. Web前端学习笔记:Bootstrap框架

    很久之前就有很多人给我推荐twitter的Bootstrap框架,但是直到前几天我才真正学习了下Bootstrap,的确是相当棒的框架,至少从视觉体验上超越了很多以前碰到了前端UI框架.今天我要聊聊B ...

  3. Bootstrap框架中的字形图标的理解

    最近项目中准备使用 Bootstrap 框架,看中了Ace Admin 这套皮肤,看其代码的时候,发现使用了字形图标.下面内容来源于网络,根据自己对新知识的学习曲线重新整合了一下: 一,字形图标的定义 ...

  4. Bootstrap框架 inconfont font-awesome

    Bootstrap框架和inconfont.font-awesome使用 iconfont的使用:https://www.cnblogs.com/clschao/articles/10387580.h ...

  5. day 49 Bootstrap框架和inconfont、font-awesome使用

    Bootstrap框架和inconfont.font-awesome使用   iconfont的使用:https://www.cnblogs.com/clschao/articles/10387580 ...

  6. day01 前端bootstrap框架

    day01 django框架之bootstrap框架 今日内容概要 前端框架之bootstrap 该框架支持cv编写前端页面 利用socket模块编写一个简易版本的web框架 利用wsgiref模块编 ...

  7. Bootstrap框架的学习(一)

    一.Bootstrap框架介绍 Bootstrap是一个非常优秀的前端UI框架,一个轻量级的UI前端框架,是基于HTML+CSS+JavaScript的框架. 二.简单介绍 Bootstrap框架是属 ...

  8. 基于BootStrap框架构建快速响应的GPS部标监控平台

    最近一个客户要求将gps部标平台移植到bootStrap框架作为前端框架,符合交通部796部标只是他们的一个基本要求,重点是要和他们的冷链云物流平台进行适配.我自己先浏览了客户的云物流平台的界面,采用 ...

  9. BootStrap框架

    简介: Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷,是一个CSS ...

随机推荐

  1. vue-fetch

    1.安装命令“ cnpm install --save isomorphic-fetch es6-promise 2.由于ie不支持Promise,所以需要安装promise-polyfill; cn ...

  2. ECS分区挂载数据盘

    地址:https://help.aliyun.com/document_detail/25426.html?spm=5176.11065259.1996646101.searchclickresult ...

  3. mysql 定期删除表中无用数据

    MySQL5.1.x版本中引入了一项新特性EVENT,定期执行某些事物,这可以帮助我们实现定期执行某个小功能,不在依赖代码去实现. 我现在有一张表,这张表中的数据有个特点,每天都会有大量数据插入,但是 ...

  4. Android:四大架构的优缺点,你真的了解吗?

    声明|转载于作者:KunMinX原文链接:https://www.jianshu.com/p/9ef813d5c1af 前言 前不久刚结束对 20 模块项目的第 3 轮重构,一路见证 MVC.MVP. ...

  5. extjs中store的reload事件异步问题解决

    转载自:http://blog.sina.com.cn/s/blog_8f8b7fc10100zd75.html store0.reload({params:{start:0, limit:10}}) ...

  6. kindedit编辑器和xxs攻击防护(BeautifulSoup)的简单使用

    一.kindedit编辑器 就是上面这样的编辑输入文本的一个编辑器 这也是一个插件.那么怎么用呢? 1.下载:百度kindedit 2.引入: <script src="/static ...

  7. LeetCode(111):二叉树的最小深度

    Easy! 题目描述: 给定一个二叉树,找出其最小深度. 最小深度是从根节点到最近叶子节点的最短路径上的节点数量. 说明: 叶子节点是指没有子节点的节点. 示例: 给定二叉树 [3,9,20,null ...

  8. cf842C 树形dp+gcd函数

    树形dp用一下就好了 /* dp[i]表示不删节点的gcd值 每个结点开个vector用来存储删一个点之后的最大值 然后排序 去重 */ #include<bits/stdc++.h> # ...

  9. 安装Mycat 曾经踩的那些坑

    1. INFO | jvm | ----/--/-- --:--:-- | Caused by: io.mycat.config.util.ConfigException: schema TEST d ...

  10. springboot+mybatis+springMVC基础框架搭建

    项目结构概览 pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http: ...