博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
整合django和bootstrap框架
阅读量:7062 次
发布时间:2019-06-28

本文共 1124 字,大约阅读时间需要 3 分钟。

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

转载于:https://www.cnblogs.com/alan-babyblog/p/5836024.html

你可能感兴趣的文章
字符串拼接代码规范 转需
查看>>
ABP官方文档翻译 5.3 OData集成
查看>>
13.特殊IP的区别
查看>>
斜杠与反斜杠的记法
查看>>
利用IDEA构建springboot应用
查看>>
JAVA高级--异常处理概念和异常处理机制
查看>>
AngularJS code converage
查看>>
【ASP.NET Process Model 笔记 二】ASP.NET Http Runtime Pipeline
查看>>
c# 抓取 js动态生成的HTML的工具:NHtmlUnit‎
查看>>
1849: Cool number
查看>>
【小知识】为什么负数除二和右移一位的结果不一样?
查看>>
ecshop调用指定分类(包含子分类)下所有产品的评论信息
查看>>
树莓派板子中的灯光的信息
查看>>
前端常见的设计模式
查看>>
Java基础——数组Array
查看>>
053(四十五)
查看>>
SQL Server 2008 安全性——透明数据加密(TDE)【转】
查看>>
cmake 增加math.h 标准库
查看>>
Linux下 保存 git账号密码
查看>>
PHP扩展开发--编写一个helloWorld扩展
查看>>