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使用opencv进行人脸识别
Apr 07 Python
python使用pycharm环境调用opencv库
Feb 11 Python
Django实现全文检索的方法(支持中文)
May 14 Python
对TensorFlow中的variables_to_restore函数详解
Jul 30 Python
在python里从协程返回一个值的示例
Feb 19 Python
Python中变量的输入输出实例代码详解
Jul 28 Python
Pytorch训练过程出现nan的解决方式
Jan 02 Python
python pandas dataframe 去重函数的具体使用
Jul 20 Python
Python制作简单的剪刀石头布游戏
Dec 10 Python
python asyncio 协程库的使用
Jan 21 Python
pytorch 梯度NAN异常值的解决方案
Jun 05 Python
Python面试不修改数组找出重复的数字
May 20 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
用PHP实现Ftp用户的在线管理的代码
2007/03/06 PHP
php简单实现多字节字符串翻转的方法
2015/03/31 PHP
遍历jquery对象的代码分享
2011/11/02 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
2013/03/17 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
2014/06/20 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
2015/09/11 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
jquery分页插件jquery.pagination.js使用方法解析
2016/04/01 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
2016/07/11 Javascript
jQuery删除当前节点元素
2016/12/07 Javascript
JS中parseInt()和map()用法分析
2016/12/16 Javascript
基于vue实现图片验证码倒计时60s功能
2019/12/10 Javascript
Python自动调用IE打开某个网站的方法
2015/06/03 Python
matplotlib 输出保存指定尺寸的图片方法
2018/05/24 Python
Python实现爬虫从网络上下载文档的实例代码
2018/06/13 Python
python里运用私有属性和方法总结
2019/07/08 Python
pandas 选取行和列数据的方法详解
2019/08/08 Python
python 实现简单的计算器(gui界面)
2020/11/11 Python
韩国江南富人区高端时尚百货商场:Galleria(格乐丽雅)
2018/03/27 全球购物
技术经理的自我评价范文
2013/12/03 职场文书
厂长助理岗位职责
2013/12/27 职场文书
大学生最新职业生涯规划书范文
2014/01/12 职场文书
优秀辅导员事迹材料
2014/02/16 职场文书
护理助产毕业生的求职信
2014/03/02 职场文书
技术总监管理职责范本
2014/03/06 职场文书
2014第二批党的群众路线教育实践活动对照检查材料思想汇报
2014/09/18 职场文书
党员学习新党章思想汇报
2014/10/25 职场文书
招商引资工作汇报
2014/10/28 职场文书
2014年实习生工作总结
2014/11/27 职场文书
工作简历自我评价
2015/03/11 职场文书
薪资证明范本
2015/06/19 职场文书
python基于turtle绘制几何图形
2021/06/15 Python
SpringBoot生成License的实现示例
2021/06/16 Java/Android
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS