Django配置Bootstrap, js实现过程详解


Posted in Python onOctober 13, 2020

1、首先在APP目录下创建一个static文件夹

如图:

Django配置Bootstrap, js实现过程详解

# Application definition

INSTALLED_APPS = [
  'django.contrib.admin',
  'django.contrib.auth',
  'django.contrib.contenttypes',
  'django.contrib.sessions',
  'django.contrib.messages',
  'django.contrib.staticfiles',
  'appBook.apps.AppbookConfig',
  
]

2、在settings.py中 最底部添加如下:

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.11/howto/static-files/

STATIC_URL = '/static/'
STATIC_ROOT=(
  os.path.join(BASE_DIR,"appBook/static"),
)

3、在html页面头部添加:

Django配置Bootstrap, js实现过程详解

{% load staticfiles %}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.css' %}" rel="external nofollow" >
  <style>
    .container{
      margin-top: 80px;
    }
  </style>
</head>
<body>

4、在html模版页面,可以用如下方式调用:

<img src="{% static 'images/logo.gif' %}" alt=""/> 
<img src="/static/images/acer.gif" alt=""/> 
推荐使用第二种,因为如果图片名称是动态的,可以通过views这么绑定: 
<img src="/static/images/{{name}}.gif" alt=""/> css的引用同样如此: <link rel="stylesheet" href="{% static ‘style/base.css' %}" rel="external nofollow" type="text/css"> <link rel="stylesheet" href="/static/style/base.css" rel="external nofollow" type="text/css"> js的引用同样如此: <script type="text/javascript" src="{% static ‘js/jquery-1.8.3.min.js' %}"/> <script type="text/javascript" src="/static/js/jquery-1.8.3.min.js"/>
可以用 python manage.py findstatic css/index.css 寻找 css

Django:locals()小技巧

locals()返回一个包含当前作用域里面的所有变量和它们的值的字典。

所以可以把views改写为

def current_datetime(request):
  current_date = datetime.datetime.now()
  return render_to_response('current_datetime.html', locals())

这里要注意的是要把now重命名为current_date,因为模板需要的是这个变量名。

在template是如下定义的:

<html>
  <body>
    <font color = "blue">It is is now {{ current_date }}.</font>
  </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Python 相关文章推荐
python开发的小球完全弹性碰撞游戏代码
Oct 15 Python
python命令行参数解析OptionParser类用法实例
Oct 09 Python
python通过pip更新所有已安装的包实现方法
May 19 Python
使用pytorch进行图像的顺序读取方法
Jul 27 Python
Python使用random.shuffle()打乱列表顺序的方法
Nov 08 Python
python networkx 包绘制复杂网络关系图的实现
Jul 10 Python
Django models.py应用实现过程详解
Jul 29 Python
python3操作注册表的方法(Url protocol)
Feb 05 Python
python实现贪吃蛇双人大战
Apr 18 Python
如何在Windows中安装多个python解释器
Jun 16 Python
用pushplus+python监控亚马逊到货动态推送微信
Jan 29 Python
python线程优先级队列知识点总结
Feb 28 Python
Python文件操作及内置函数flush原理解析
Oct 13 #Python
Django如何实现防止XSS攻击
Oct 13 #Python
5款实用的python 工具推荐
Oct 13 #Python
Python内置函数及功能简介汇总
Oct 13 #Python
Python pymysql模块安装并操作过程解析
Oct 13 #Python
Python安装并操作redis实现流程详解
Oct 13 #Python
python按照list中字典的某key去重的示例代码
Oct 13 #Python
You might like
一个用php3编写的简单计数器
2006/10/09 PHP
基于HBase Thrift接口的一些使用问题及相关注意事项的详解
2013/06/03 PHP
PHP缩略图生成和图片水印制作
2017/01/07 PHP
Laravel框架实现redis集群的方法分析
2017/09/14 PHP
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
IE6已终止操作问题的2种情况及解决
2014/04/23 Javascript
了解Javascript的模块化开发
2015/03/02 Javascript
js实现文字闪烁特效的方法
2015/12/17 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
AngularJS实践之使用NgModelController进行数据绑定
2016/10/08 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
2017/04/01 Javascript
实现vuex原理的示例
2020/10/21 Javascript
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
Python运行的17个时新手常见错误小结
2012/08/07 Python
测试、预发布后用python检测网页是否有日常链接
2014/06/03 Python
实现python版本的按任意键继续/退出
2016/09/26 Python
使用Python实现微信提醒备忘录功能
2018/12/04 Python
Python+PyQt5实现美剧爬虫可视工具的方法
2019/04/25 Python
pandas DataFrame创建方法的方式
2019/08/02 Python
Python的Lambda函数用法详解
2019/09/03 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
在django中使用apscheduler 执行计划任务的实现方法
2020/02/11 Python
python列表的逆序遍历实现
2020/04/20 Python
python实现爱奇艺登陆密码RSA加密的方法示例详解
2020/05/27 Python
Python爬虫之Selenium库的使用方法
2021/01/03 Python
html5使用canvas绘制太阳系效果
2014/12/15 HTML / CSS
Hotels.com爱尔兰:全球酒店预订
2017/02/24 全球购物
Linux面试经常问的文件系统操作命令
2016/10/04 面试题
医学院四年学习生活的自我评价
2013/11/06 职场文书
信访工作者先进事迹
2014/01/17 职场文书
优秀管理者事迹材料
2014/05/22 职场文书
股份合作协议书
2014/09/10 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
2015年高中班级工作总结
2015/07/21 职场文书
2016春季幼儿园小班开学寄语
2015/12/03 职场文书
jquery插件实现悬浮的菜单
2021/04/24 jQuery