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根据距离和时长计算配速示例
Feb 16 Python
小结Python用fork来创建子进程注意事项
Jul 03 Python
python网络编程之读取网站根目录实例
Sep 30 Python
深入解读Python解析XML的几种方式
Feb 16 Python
设计模式中的原型模式在Python程序中的应用示例
Mar 02 Python
Python sqlite3事务处理方法实例分析
Jun 19 Python
python爬虫_实现校园网自动重连脚本的教程
Apr 22 Python
pycharm打开命令行或Terminal的方法
Jan 16 Python
详解PyCharm+QTDesigner+PyUIC使用教程
Jun 13 Python
Python 中的参数传递、返回值、浅拷贝、深拷贝
Jun 25 Python
Python基于staticmethod装饰器标示静态方法
Oct 17 Python
Python爬虫基础之初次使用scrapy爬虫实例
Jun 26 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下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
PHP 转义使用详解
2013/07/15 PHP
使用php测试硬盘写入速度示例
2014/01/27 PHP
PHP实现文件下载断点续传详解
2014/10/15 PHP
PHP缓存集成库phpFastCache用法
2014/12/15 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
解决tp5在nginx下修改配置访问的问题
2019/10/16 PHP
Laravel Eloquent ORM 实现查询表中指定的字段
2019/10/17 PHP
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
jqplot通过ajax动态画折线图的方法及思路
2013/12/08 Javascript
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
2015/02/13 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
2015/08/18 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
Express使用html模板的详细代码
2017/09/18 Javascript
bootstrap可编辑下拉框jquery.editable-select
2017/10/12 jQuery
基于模板引擎Jade的应用(详解)
2017/12/12 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
vue前端和Django后端如何查询一定时间段内的数据
2021/02/28 Vue.js
[01:51]DAC趣味视频-如何成为职业选手.mp4
2017/04/02 DOTA
Django框架下在视图中使用模版的方法
2015/07/16 Python
python中使用PIL制作并验证图片验证码
2018/03/15 Python
python+appium+yaml移动端自动化测试框架实现详解
2020/11/24 Python
python中用ctypes模拟点击的实例讲解
2020/11/26 Python
python中添加模块导入路径的方法
2021/02/03 Python
北京鼎普科技股份有限公司软件测试面试题
2012/04/07 面试题
《花瓣飘香》教学反思
2014/04/15 职场文书
公司总经理岗位职责
2015/04/01 职场文书
党员承诺书范文2015
2015/04/27 职场文书
保护环境建议书作文300字
2015/09/14 职场文书
vue基于Teleport实现Modal组件
2021/05/31 Vue.js
vue项目中的支付功能实现(微信支付和支付宝支付)
2022/02/18 Vue.js