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实现爬取需要登录的网站完整示例
Aug 19 Python
Python使用matplotlib简单绘图示例
Feb 01 Python
django数据库migrate失败的解决方法解析
Feb 08 Python
Python使用pydub库对mp3与wav格式进行互转的方法
Jan 10 Python
PyQt5创建一个新窗口的实例
Jun 20 Python
python jenkins 打包构建代码的示例代码
Nov 29 Python
python生成并处理uuid的实现方式
Mar 03 Python
python爬虫开发之Beautiful Soup模块从安装到详细使用方法与实例
Mar 09 Python
Python3创建Django项目的几种方法(3种)
Jun 03 Python
numpy的Fancy Indexing和array比较详解
Jun 11 Python
python 利用opencv实现图像网络传输
Nov 12 Python
OpenCV绘制圆端矩形的示例代码
Aug 30 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
ThinkPHP有变量的where条件分页实例
2014/11/03 PHP
PHP二维数组排序简单实现方法
2016/02/14 PHP
input、button的不同type值在ajax提交表单时导致的陷阱
2009/02/24 Javascript
javascript检测对象中是否存在某个属性判断方法小结
2013/05/19 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
2014/03/17 Javascript
ext前台接收action传过来的json数据示例
2014/06/17 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
2015/02/27 Javascript
针对初学者的jQuery入门指南
2015/08/15 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
2015/11/22 Javascript
JavaScript中的对象继承关系
2016/08/01 Javascript
Angular 中 select指令用法详解
2016/09/29 Javascript
微信小程序页面间通信的5种方式
2017/03/31 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
js数组实现权重概率分配
2017/09/12 Javascript
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
2018/05/08 Javascript
TypeScript高级用法的知识点汇总
2019/12/17 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
2020/03/02 Javascript
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
python批量修改文件名的实现代码
2014/09/01 Python
python简单的函数定义和用法实例
2015/05/07 Python
python读写json文件的简单实现
2017/04/11 Python
python实现两个文件合并功能
2018/04/01 Python
Python拼接微信好友头像大图的实现方法
2018/08/01 Python
Django框架登录加上验证码校验实现验证功能示例
2019/05/23 Python
感知器基础原理及python实现过程详解
2019/09/30 Python
如何基于Python实现电子邮件的发送
2019/12/16 Python
Python实现常见的几种加密算法(MD5,SHA-1,HMAC,DES/AES,RSA和ECC)
2020/05/09 Python
python 调整图片亮度的示例
2020/12/03 Python
open_basedir restriction in effect. 原因与解决方法
2021/03/14 PHP
G-Form护具官方网站:美国运动保护装备
2019/09/04 全球购物
电气专业推荐信范文
2013/11/18 职场文书
四风问题个人对照检查剖析材料
2014/09/27 职场文书
创业计划书之校园跑腿公司
2019/09/24 职场文书
解决redis批量删除key值的问题
2022/03/23 Redis