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正则分组的应用
Nov 10 Python
linux环境下安装pyramid和新建项目的步骤
Nov 27 Python
利用Python中的mock库对Python代码进行模拟测试
Apr 16 Python
Python实现图像几何变换
Jul 06 Python
Python减少循环层次和缩进的技巧分析
Mar 15 Python
Python爬虫实现网页信息抓取功能示例【URL与正则模块】
May 18 Python
Django实现学员管理系统
Feb 26 Python
将matplotlib绘图嵌入pyqt的方法示例
Jan 08 Python
详细分析Python垃圾回收机制
Jul 01 Python
python右对齐的实例方法
Jul 05 Python
Python 如何查找特定类型文件
Aug 17 Python
python安装sklearn模块的方法详解
Nov 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
php面向对象全攻略 (四)构造方法与析构方法
2009/09/30 PHP
PHP中$_SERVER的详细参数与说明介绍
2013/10/26 PHP
PHP代码优化之成员变量获取速度对比
2014/02/28 PHP
ThinkPHP权限认证Auth实例详解
2014/07/22 PHP
PHP二进制与字符串之间的相互转换教程
2016/10/14 PHP
php编程实现简单的网页版计算器功能示例
2017/04/26 PHP
创建无限极分类树型结构的简单方法
2017/06/20 PHP
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
jQuery动态添加的元素绑定事件处理函数代码
2011/08/02 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
2012/01/10 Javascript
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
jQuery中filter()和find()的区别深入了解
2013/09/25 Javascript
JS定时器实例详细分析
2013/10/11 Javascript
IE、FF浏览器下修改标签透明度
2014/01/28 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
2014/03/13 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
小白谈谈对JS原型链的理解
2016/05/03 Javascript
angular2路由切换改变页面title的示例代码
2017/08/23 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
2017/09/12 Javascript
vue.js select下拉框绑定和取值方法
2018/03/03 Javascript
vue 项目 iOS WKWebView 加载
2019/04/17 Javascript
JavaScript canvas仿代码流瀑布
2020/02/10 Javascript
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
使用Python操作MySQL的一些基本方法
2015/08/16 Python
Python使用win32com实现的模拟浏览器功能示例
2017/07/13 Python
对python requests发送json格式数据的实例详解
2018/12/19 Python
python 在指定范围内随机生成不重复的n个数实例
2019/01/28 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
python3 下载网络图片代码实例
2019/08/27 Python
关于Pytorch的MLP模块实现方式
2020/01/07 Python
python3 配置logging日志类的操作
2020/04/08 Python
python中lower函数实现方法及用法讲解
2020/12/23 Python
html5基础教程常用技巧整理
2013/08/20 HTML / CSS
美国运动鞋和运动服零售商:Footaction
2017/04/07 全球购物
旅游管理本科生求职信
2013/10/14 职场文书
工作骂脏话检讨书
2014/10/05 职场文书