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的Bottle框架中实现最基本的get和post的方法的教程
Apr 30 Python
Python的组合模式与责任链模式编程示例
Feb 02 Python
Python迭代和迭代器详解
Nov 10 Python
Python中%r和%s的详解及区别
Mar 16 Python
机器学习python实战之手写数字识别
Nov 01 Python
Python读取MRI并显示为灰度图像实例代码
Jan 03 Python
1 行 Python 代码快速实现 FTP 服务器
Jan 25 Python
基于anaconda下强大的conda命令介绍
Jun 11 Python
Python Pandas实现数据分组求平均值并填充nan的示例
Jul 04 Python
详解Python中的format格式化函数的使用方法
Nov 20 Python
Tensorflow之MNIST CNN实现并保存、加载模型
Jun 17 Python
将tf.batch_matmul替换成tf.matmul的实现
Jun 18 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
PHP5新特性: 更加面向对象化的PHP
2006/11/18 PHP
PHP网站基础优化方法小结
2008/09/29 PHP
CI框架中通过hook的方式实现简单的权限控制
2015/01/07 PHP
JavaScript OOP面向对象介绍
2010/12/02 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
jQuery Tools tab(幻灯片)
2012/07/14 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
2014/02/19 Javascript
JS获得浏览器版本和操作系统版本的例子
2014/05/13 Javascript
javascript判断复选框是否选中的方法
2015/10/16 Javascript
node.js实现快速截图
2016/08/27 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
2016/09/16 Javascript
Vue.js中数组变动的检测详解
2016/10/12 Javascript
require、backbone等重构手机图片查看器
2016/11/17 Javascript
微信小程序实现原生步骤条
2019/07/25 Javascript
vue项目部署到nginx/tomcat服务器的实现
2019/08/26 Javascript
vue实现按钮切换图片
2021/01/20 Vue.js
[01:12:27]EG vs Secret 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
Python Pywavelet 小波阈值实例
2019/01/09 Python
PyQt5 多窗口连接实例
2019/06/19 Python
Python 3 使用Pillow生成漂亮的分形树图片
2019/12/24 Python
python使用梯度下降算法实现一个多线性回归
2020/03/24 Python
Python Django中的STATIC_URL 设置和使用方式
2020/03/27 Python
python 通过文件夹导入包的操作
2020/06/01 Python
Python 用__new__方法实现单例的操作
2020/12/11 Python
Hotels.com印度:酒店预订
2019/05/11 全球购物
HomeAway英国:全球领先的度假租赁在线市场
2020/02/03 全球购物
成人大专生实习期的自我评价
2013/10/02 职场文书
小学校园之星事迹材料
2014/05/16 职场文书
办公室主任岗位承诺书
2014/05/29 职场文书
小学校园广播稿集锦
2014/10/04 职场文书
六查六看自检自查剖析材料
2014/10/14 职场文书
体育委员竞选稿
2015/11/21 职场文书
一文带你探究MySQL中的NULL
2021/11/11 MySQL
Python+Tkinter制作专属图形化界面
2022/04/01 Python
Win11黑色桌面背景怎么办?Win11黑色壁纸解决方法汇总
2022/04/05 数码科技
详解Python中的for循环
2022/04/30 Python