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 相关文章推荐
javascript 流畅动画实现原理
Sep 08 Javascript
jquery 问答知识整理
Feb 11 Javascript
初窥JQuery-Jquery简介 入门了解篇
Nov 25 Javascript
Jquery判断IE6等浏览器的代码
Apr 05 Javascript
探讨AngularJs中ui.route的简单应用
Nov 16 Javascript
bootstrap侧边栏圆点导航
Jan 11 Javascript
Vue监听数据对象变化源码
Mar 09 Javascript
Javascript实现的StopWatch功能示例
Jun 13 Javascript
vue小白入门教程
Apr 02 Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 Javascript
vue实现户籍管理系统
May 29 Javascript
openlayers实现地图弹窗
Sep 25 Javascript
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(视频)Http下载
2006/12/12 PHP
php检测useragent版本示例
2014/03/24 PHP
PHP中使用数组指针函数操作数组示例
2014/11/19 PHP
图片连续滚动代码[兼容IE/firefox]
2009/06/11 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
2013/10/20 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
AngularJS的表单使用详解
2015/06/17 Javascript
JavaScript中的函数(二)
2015/12/23 Javascript
AngularJS数据源的多种获取方式汇总
2016/02/02 Javascript
详解Nodejs基于mongoose模块的增删改查的操作
2016/12/21 NodeJs
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
2017/06/12 Javascript
node.js中grunt和gulp的区别详解
2017/07/17 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
2018/02/09 Javascript
Vue波纹按钮组件制作
2018/04/30 Javascript
Vue+webpack+Element 兼容问题总结(小结)
2018/08/16 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
2018/09/18 Javascript
跨域解决之JSONP和CORS的详细介绍
2018/11/21 Javascript
JavaScript实现简易聊天对话框(加滚动条)
2020/02/10 Javascript
JS实现简易计算器
2020/02/14 Javascript
原生JavaScript实现轮播图
2021/01/10 Javascript
[01:52]2020年DOTA2 TI10夏季活动预告片
2020/07/15 DOTA
python遍历数组的方法小结
2015/04/30 Python
Python实现代码统计工具(终极篇)
2016/07/04 Python
详细介绍Python的鸭子类型
2016/09/12 Python
详解Appium+Python之生成html测试报告
2019/01/04 Python
python 队列基本定义与使用方法【初始化、赋值、判断等】
2019/10/24 Python
德国原装品牌香水、化妆品和手表网站:BRASTY.DE
2016/10/16 全球购物
.NET概念性的面试题
2012/02/29 面试题
Java面试题:为什么要用Java
2012/05/11 面试题
中学运动会广播稿
2014/01/19 职场文书
安全生产投入制度
2014/01/29 职场文书
年终工作总结范文2014
2014/11/27 职场文书
2014年单位工作总结范文
2014/11/27 职场文书
旷课检讨书范文
2015/01/27 职场文书
2016年校园社会综合治理宣传月活动总结
2016/03/16 职场文书
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript