BootStrap扔进Django里的方法详解


Posted in Javascript onMay 13, 2016

因为django的版本差异化比较大,所以以下配置仅供学习参考。

D:\www\mysite>python --version
Python 2.7.5
>>> print django.__version__
1.9.4

本记录不作细说,主要配置过程如下:

1.settings.py最后一段,关于静态文件的配置

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.9/howto/static-files/
SITE_ROOT = os.path.join(os.path.abspath(os.path.dirname(__file__)), '..')
STATIC_ROOT = os.path.join(SITE_ROOT, 'static')
STATIC_URL = '/static/'
STATICFILES_DIRS = (
("css", os.path.join(STATIC_ROOT, 'css')),
("js", os.path.join(STATIC_ROOT, 'js')),
("images", os.path.join(STATIC_ROOT, 'images')),
("bower_components", os.path.join(STATIC_ROOT, 'bower_components')),
)

2.urls.py 关于路由的配置

urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^$', views.index),
url(r'^home/', views.home),
]

3.views.py 视图设计,简单得不能再简单的那种。

def home(request):
return render_to_response('home/login.html')

4.模板调用 home/login.html 页面对于静态文件css, js,以及图片等调用。

<!-- Bootstrap Core CSS -->
<link href="/static/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="/static/css/sb-admin-2.css" rel="stylesheet">
<img src="/static/images/xjlxprocess.png" />

5.最后,我的目录结构,就如网上其它文章所描述的那样。

website
---------static 
---------|-----css 
---------|-----js 
---------|-----images 
---------|-----bower_components 
---------templates 
---------|-----home
---------|-----------login.html
---------|-----admin
---------website

6.站点打开如下:

BootStrap扔进Django里的方法详解

以上内容是小编给大家介绍的BootStrap扔进Django里的方法详解,希望对大家有所帮助,如果大家想了解更多资讯敬请关注三水点靠木网站!

Javascript 相关文章推荐
xml 封装与解析(javascript和C#中)
Jul 26 Javascript
jquery ui dialog ie8出现滚动条的解决方法
Dec 06 Javascript
Jquery练习之表单验证实现代码
Dec 14 Javascript
JS上传前预览图片实例
Mar 25 Javascript
jquery验证表单中的单选与多选实例
Aug 18 Javascript
js字符串操作方法实例分析
May 06 Javascript
js制作简单的音乐播放器的示例代码
Aug 28 Javascript
基于Vuex无法观察到值变化的解决方法
Mar 01 Javascript
JavaScript中 ES6变量的结构赋值
Jul 10 Javascript
基于vue中对鼠标划过事件的处理方式详解
Aug 22 Javascript
JS运算符优先级与表达式示例详解
Sep 04 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
JavaScript重载函数实例剖析
May 13 #Javascript
JS加载iFrame出现空白问题的解决办法
May 13 #Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
May 13 #Javascript
JS iFrame加载慢怎么解决
May 13 #Javascript
基于JS实现的笛卡尔乘积之商品发布
May 13 #Javascript
基于jQuery倒计时插件实现团购秒杀效果
May 13 #Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
May 13 #Javascript
You might like
PHP 之Section与Cookie使用总结
2012/09/14 PHP
使用php记录用户通过搜索引擎进网站的关键词
2014/02/13 PHP
php清除和销毁session的方法分析
2015/03/19 PHP
PHP快速推送微信模板消息
2017/04/14 PHP
JavaScript 变量命名规则
2009/09/23 Javascript
Javascript 模式实例 观察者模式
2009/10/24 Javascript
jquery 可拖拽的窗体控件实现代码
2010/03/21 Javascript
关于javascript DOM事件模型的两件事
2010/07/22 Javascript
Javascript事件热键兼容ie|firefox
2010/12/30 Javascript
jquery插件hiAlert实现网页对话框美化
2015/05/03 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
2015/10/10 Javascript
js判断是否为空和typeof的用法(详解)
2016/10/07 Javascript
js实现tab切换效果
2017/02/16 Javascript
js is_valid_filename验证文件名的函数
2017/07/19 Javascript
在Debian(Raspberry Pi)树莓派上安装NodeJS的教程详解
2017/09/19 NodeJs
vue表单数据交互提交演示教程
2019/11/13 Javascript
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
[43:43]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第三场 11.29
2020/12/02 DOTA
python接口自动化测试之接口数据依赖的实现方法
2019/04/26 Python
对django的User模型和四种扩展/重写方法小结
2019/08/17 Python
python求平均数、方差、中位数的例子
2019/08/22 Python
python实现银行账户系统
2021/02/22 Python
使用html2canvas将页面转成图并使用用canvas2image下载
2019/04/04 HTML / CSS
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
英国皇家造币厂:The Royal Mint
2018/10/05 全球购物
美国最好的钓鱼、狩猎和划船装备商店:Bass Pro Shops
2018/12/02 全球购物
我们没有写servlet的构造方法,那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
三年级科学教学反思
2014/01/29 职场文书
公司委托书格式范文
2014/04/04 职场文书
南京青奥会口号
2014/06/12 职场文书
青年教师师德演讲稿
2014/08/26 职场文书
党风廉政建设调研报告
2015/01/01 职场文书
干部考核工作总结
2015/08/12 职场文书
小学班主任心得体会
2016/01/07 职场文书
CSS 制作波浪效果的思路
2021/05/18 HTML / CSS
Python OpenGL基本配置方式
2022/05/20 Python