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 02 Python
Python实现抓取城市的PM2.5浓度和排名
Mar 19 Python
Python发送以整个文件夹的内容为附件的邮件的教程
May 06 Python
Python tkinter模块弹出窗口及传值回到主窗口操作详解
Jul 28 Python
Python+PIL实现支付宝AR红包
Feb 09 Python
python实现超简单的视频对象提取功能
Jun 04 Python
python中多个装饰器的执行顺序详解
Oct 08 Python
python3对接mysql数据库实例详解
Apr 30 Python
python 中值滤波,椒盐去噪,图片增强实例
Dec 18 Python
基于Tensorflow一维卷积用法详解
May 22 Python
django序列化时使用外键的真实值操作
Jul 15 Python
python实现跨年表白神器--你值得拥有
Jan 04 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+MYSQL开发工具及资源收藏
2007/01/02 PHP
PHP--用万网的接口实现域名查询功能
2012/12/13 PHP
深入php之规范编程命名小结
2013/05/15 PHP
php源代码安装常见错误与解决办法分享
2013/05/28 PHP
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
thinkPHP分组后模板无法加载问题解决方法
2016/07/12 PHP
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
javascript SpiderMonkey中的函数序列化如何进行
2012/12/05 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
2015/05/19 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
2017/01/10 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
js字符串与Unicode编码互相转换
2017/05/17 Javascript
微信小程序页面开发注意事项整理
2017/05/18 Javascript
AngularJS 中ui-view传参的实例详解
2017/08/25 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
2017/09/21 Javascript
利用js编写网页进度条效果
2017/10/08 Javascript
对angular 监控数据模型变化的事件方法$watch详解
2018/10/09 Javascript
H5实现手机拍照和选择上传功能
2019/12/18 Javascript
详细分析vue响应式原理
2020/06/22 Javascript
学习python (1)
2006/10/31 Python
打印出python 当前全局变量和入口参数的所有属性
2009/07/01 Python
python PIL模块与随机生成中文验证码
2016/02/27 Python
python数据处理实战(必看篇)
2017/06/11 Python
win10系统Anaconda和Pycharm的Tensorflow2.0之CPU和GPU版本安装教程
2019/12/03 Python
python图形界面开发之wxPython树控件使用方法详解
2020/02/24 Python
python argparse传入布尔参数false不生效的解决
2020/04/20 Python
PyTorch: Softmax多分类实战操作
2020/07/07 Python
Python hashlib和hmac模块使用方法解析
2020/12/08 Python
canvas基础之图形验证码的示例
2018/01/02 HTML / CSS
英国空调、除湿机和通风设备排名第一:Air Con Centre
2019/02/25 全球购物
学期自我鉴定
2013/11/04 职场文书
自荐信如何制作?
2014/02/21 职场文书
2014年财务工作总结范文
2014/11/11 职场文书
MBA推荐信怎么写
2015/03/25 职场文书
win10电脑右下角输入法图标不见了?Win10右下角不显示输入法的解决方法
2022/07/23 数码科技