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网络编程实例简析
Sep 26 Python
利用Python绘制数据的瀑布图的教程
Apr 07 Python
Python中Class类用法实例分析
Nov 12 Python
Python基于高斯消元法计算线性方程组示例
Jan 17 Python
详解django.contirb.auth-认证
Jul 16 Python
对python for 文件指定行读写操作详解
Dec 29 Python
Python使用Pandas对csv文件进行数据处理的方法
Aug 01 Python
python Elasticsearch索引建立和数据的上传详解
Aug 04 Python
python实现的汉诺塔算法示例
Oct 23 Python
使用Tkinter制作信息提示框
Feb 18 Python
python实现密码强度校验
Mar 18 Python
手把手教你如何用Pycharm2020.1.1配置远程连接的详细步骤
Aug 07 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 实例化类的一点摘记
2008/03/23 PHP
从PHP的源码中深入了解stdClass类
2014/04/18 PHP
QQ互联一键登录审核不通过的解决方案
2014/09/10 PHP
ThinkPHP数据操作方法总结
2015/09/28 PHP
把jQuery的类、插件封装成seajs的模块的方法
2014/03/12 Javascript
从零学JSON之JSON数据结构
2014/05/19 Javascript
jQuery检测鼠标左键和右键点击的方法
2015/03/17 Javascript
JS产生随机数的几个用法详解
2016/06/22 Javascript
基于Nodejs利用socket.io实现多人聊天室
2017/02/22 NodeJs
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
2017/03/24 jQuery
Vue实现一个返回顶部backToTop组件
2017/07/25 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
2018/03/28 Javascript
JavaScript实现随机点名小程序
2020/10/29 Javascript
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
Python设计模式之单例模式实例
2014/04/26 Python
Python中Django框架利用url来控制登录的方法
2015/07/25 Python
关于Python正则表达式 findall函数问题详解
2018/03/22 Python
在python中按照特定顺序访问字典的方法详解
2018/12/14 Python
Python Cookie 读取和保存方法
2018/12/28 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
加拿大百叶窗和窗帘定制网站:Blinds
2017/01/30 全球购物
英国最大的婴儿监视器网上商店:Baby Monitors Direct
2018/04/24 全球购物
大整数数相乘的问题
2012/07/22 面试题
写出二分查找算法的两种实现
2013/05/13 面试题
平面设计岗位职责
2013/12/14 职场文书
保险公司晨会主持词
2014/03/22 职场文书
力学专业求职信
2014/07/23 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
2016新教师岗前培训心得体会
2016/01/08 职场文书
《作风建设永远在路上》心得体会
2016/01/21 职场文书
你会写报告?产品体验报告到底该怎么写?
2019/08/14 职场文书
2019年作为一名实习生的述职报告
2019/09/29 职场文书
将图片保存到mysql数据库并展示在前端页面的实现代码
2021/05/02 MySQL
vue-cropper组件实现图片切割上传
2021/05/27 Vue.js
html css3不拉伸图片显示效果
2021/06/07 HTML / CSS