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中二维阵列的变换实例
Oct 09 Python
Python中shape计算矩阵的方法示例
Apr 21 Python
python学生管理系统代码实现
Apr 05 Python
Python使用 Beanstalkd 做异步任务处理的方法
Apr 24 Python
Pandas 合并多个Dataframe(merge,concat)的方法
Jun 08 Python
python+ffmpeg批量去视频开头的方法
Jan 09 Python
python爬取王者荣耀全皮肤的简单实现代码
Jan 31 Python
python 解决print数组/矩阵无法完整输出的问题
Feb 19 Python
Django admin 实现search_fields精确查询实例
Mar 30 Python
Python执行时间的几种计算方法
Jul 31 Python
python openCV实现摄像头获取人脸图片
Aug 20 Python
Python作用域和名称空间的详细介绍
Apr 13 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和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
PHP文件注释标记及规范小结
2012/04/01 PHP
PHP Directory 函数的详解
2013/03/07 PHP
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
jquery导航制件jquery鼠标经过变色效果示例
2013/12/05 Javascript
javascript使用prototype完成单继承
2014/12/24 Javascript
JQuery异步获取返回值中文乱码的解决方法
2015/01/29 Javascript
jQuery检查事件是否触发的方法
2015/06/26 Javascript
JavaScript中的数据类型转换方法小结
2015/10/26 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
2016/02/29 Javascript
简单讲解AngularJS的Routing路由的定义与使用
2016/03/05 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
深入分析javascript中的错误处理机制
2016/07/17 Javascript
浅析vue数据绑定
2017/01/17 Javascript
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
2017/08/28 Javascript
express express-session的使用小结
2018/12/12 Javascript
微信小程序新手教程之页面打开数量限制
2019/03/03 Javascript
node.js基础知识汇总
2020/08/25 Javascript
微信小程序实现加入购物车滑动轨迹
2020/11/18 Javascript
[03:55]显微镜下的DOTA2特别篇——430灰烬之灵神级操作
2014/06/24 DOTA
python查找目录下指定扩展名的文件实例
2015/04/01 Python
python爬虫之自动登录与验证码识别
2020/06/15 Python
python有序查找算法 二分法实例解析
2020/02/18 Python
使用K.function()调试keras操作
2020/06/17 Python
基于python实现操作git过程代码解析
2020/07/27 Python
python报错TypeError: ‘NoneType‘ object is not subscriptable的解决方法
2020/11/05 Python
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
学校后勤人员职责
2013/12/27 职场文书
幼儿教育感言
2014/02/05 职场文书
给校长的建议书
2014/03/12 职场文书
民生工程实施方案
2014/03/22 职场文书
工作求职自荐信
2014/06/13 职场文书
2015年妇幼卫生工作总结
2015/05/23 职场文书
我的暑假生活作文(五年级)范文
2019/08/07 职场文书
JVM上高性能数据格式库包Apache Arrow入门和架构详解(Gkatziouras)
2021/05/26 Servers