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学习之第三方包安装方法(两种方法)
Jul 30 Python
Python中规范定义命名空间的一些建议
Jun 04 Python
Python的shutil模块中文件的复制操作函数详解
Jul 05 Python
git使用.gitignore设置不生效或不起作用问题的解决方法
Jun 01 Python
Python判断对象是否为文件对象(file object)的三种方法示例
Apr 26 Python
python对文件目录的操作方法实例总结
Jun 24 Python
django ModelForm修改显示缩略图 imagefield类型的实例
Jul 28 Python
pytorch中获取模型input/output shape实例
Dec 30 Python
Python3开发实例之非关系型图数据库Neo4j安装方法及Python3连接操作Neo4j方法实例
Mar 18 Python
Python collections.defaultdict模块用法详解
Jun 18 Python
django使用graphql的实例
Sep 02 Python
python 录制系统声音的示例
Dec 21 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手册及PHP编程标准
2006/12/17 PHP
PHP中限制IP段访问、禁止IP提交表单的代码
2011/04/23 PHP
php简单定时执行任务的实现方法
2015/02/23 PHP
详解PHP中的PDO类
2015/07/06 PHP
PHP Curl模拟登录微信公众平台、新浪微博实例代码
2016/01/28 PHP
JavaScript 无符号右移运算符
2009/04/17 Javascript
JQuery从头学起第二讲
2010/07/04 Javascript
简单的两种Extjs formpanel加载数据的方式
2013/11/09 Javascript
JavaScript中神奇的call()方法
2015/03/12 Javascript
JavaScript中getUTCSeconds()方法的使用详解
2015/06/11 Javascript
JavaScript中使用指数方法Math.exp()的简介
2015/06/15 Javascript
JavaScript事件学习小结(三)js事件对象
2016/06/09 Javascript
nodejs加密Crypto的实例代码
2016/07/07 NodeJs
springMVC结合AjaxForm上传文件
2016/07/12 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
2016/09/15 Javascript
AngularJS  ng-repeat遍历输出的用法
2017/06/19 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
2017/12/19 Javascript
详解vue静态资源打包中的坑与解决方案
2018/02/05 Javascript
element ui table 增加筛选的方法示例
2018/11/02 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
Python实现程序的单一实例用法分析
2015/06/03 Python
对Django中内置的User模型实例详解
2019/08/16 Python
解决pycharm最左侧Tool Buttons显示不全的问题
2019/12/17 Python
CSS3 animation实现简易幻灯片轮播特效
2016/09/27 HTML / CSS
Html5 滚动穿透的方法
2019/05/13 HTML / CSS
澳大利亚网上玩具商店:Mr Toys Toyworld
2018/03/25 全球购物
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
EJB的角色和三个对象
2015/12/31 面试题
售后求职信范文
2014/03/15 职场文书
环境日宣传活动总结
2014/07/09 职场文书
我在伊朗长大观后感
2015/06/16 职场文书
采购员工作总结范文
2015/08/12 职场文书
房屋转让协议书(标准范本)
2016/03/21 职场文书
PyCharm配置KBEngine快速处理代码提示冲突、配置命令问题
2021/04/03 Python
Python函数式编程中itertools模块详解
2021/09/15 Python
豆瓣2021评分最高动画剧集-豆瓣评分最高的动画剧集2021
2022/03/18 日漫