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实现将SQLite中的数据直接输出为CVS的方法示例
Jul 13 Python
matplotlib中legend位置调整解析
Dec 19 Python
Python使用pylab库实现绘制直方图功能示例
Jun 01 Python
解决pycharm安装后代码区不能编辑的问题
Oct 28 Python
如何不用安装python就能在.NET里调用Python库
Jul 12 Python
Django结合ajax进行页面实时更新的例子
Aug 12 Python
python实现ip地址查询经纬度定位详解
Aug 30 Python
使用python代码进行身份证号校验的实现示例
Nov 21 Python
python3 实现口罩抽签的功能
Mar 11 Python
浅谈pymysql查询语句中带有in时传递参数的问题
Jun 05 Python
pymysql模块使用简介与示例
Nov 17 Python
python实现学生通讯录管理系统
Feb 25 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
星际争霸教主Flash的ID由来:你永远不会知道他之前的ID是www!
2019/01/18 星际争霸
对javascript和select部件的结合运用
2006/10/09 PHP
discuz论坛 用户登录 后台程序代码
2008/11/27 PHP
非常好用的Zend Framework分页类
2014/06/25 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
Javascript Throttle &amp; Debounce应用介绍
2013/03/19 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
2013/08/26 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
2013/11/13 Javascript
JS弹出层单纯的绝对定位居中示例代码
2014/02/18 Javascript
jquery限定文本框只能输入数字(整数和小数)
2016/01/08 Javascript
浅析JS原型继承与类的继承
2016/04/07 Javascript
用iframe实现不刷新整个页面上传图片的实例
2016/11/18 Javascript
ExtJs整合Echarts的示例代码
2018/02/27 Javascript
JavaScript复制内容到剪贴板的两种常用方法
2018/02/27 Javascript
Vue项目使用CDN优化首屏加载问题
2018/04/01 Javascript
layui table设置前台过滤转义等方法
2018/08/17 Javascript
详解JavaScript中关于this指向的4种情况
2019/04/18 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
2019/05/05 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
2020/02/04 Javascript
[42:27]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第三局
2016/03/05 DOTA
Python中实现参数类型检查的简单方法
2015/04/21 Python
使用python绘制常用的图表
2016/08/27 Python
老生常谈python的私有公有属性(必看篇)
2017/06/09 Python
python 简单备份文件脚本v1.0的实例
2017/11/06 Python
基于Python 装饰器装饰类中的方法实例
2018/04/21 Python
python实现批量图片格式转换
2020/06/16 Python
详解Python requests 超时和重试的方法
2018/12/18 Python
Python button选取本地图片并显示的实例
2019/06/13 Python
Python调用Windows命令打印文件
2020/02/07 Python
HTMl5的存储方式sessionStorage和localStorage详解
2014/03/18 HTML / CSS
迪拜领先运动补剂零售品牌中文站:Sporter商城
2019/08/20 全球购物
个人应聘自我评价分享
2013/11/18 职场文书
授权委托书范本
2014/04/03 职场文书
毕业生应聘求职信
2014/07/10 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL