1、首先在APP目录下创建一个static文件夹

如图：

# 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页面头部添加：

{% load staticfiles %}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.css' %}">

    <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’ %}" type="text/css"> 
<link rel="stylesheet" href="/static/style/base.css" 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>

Django配置Bootstrap, js的更多相关文章

Django 配置实用bootstrap
1.下载bootstrap代码包. 2.在目录下创建static文件夹,将bootstrap文件夹移动到static文件夹内,编辑settings.py: 最后添加如下(文件末尾): STATIC_U ...
整合django和bootstrap框架
环境: python版本:2.7.8 django版本:1.7.1 bootstrap版本:3.3.0 首先github上面有两个开源的项目用来整合django和bootstrap. https:// ...
Django 配置
Django 配置运行 django-admin.py startproject [project-name] 命令会生成一系列文件,在Django 1.6版本以后的 settings.py 文 ...
Vue项目零碎知识（全局js,css配置，element-UI,bs使用， img动态配置，js数组）
全局css样式,首先在静态assets中写好文件,然后要在main.js中配置 // 配置全局css样式 // import '@/assets/css/global.css' require('@/ ...
Vue-CLI3.0版本配置BootStrap的方法
一.引入jquery bootstrap popper 用 cnpm install jquery bootstrap@3 popper.js --save 用cnpm 来导入用npm会出 ...
bootstrap.js 文件使用指南
介绍使用 Bootstrap v3.3.7 时,需要引入三个脚本文件. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.m ...
项目前端 - vue配置 | axios配置 | cookies配置 | element-ui配置 | bootstrap配置
vue项目创建环境 1.傻瓜式安装node: 官网下载:https://nodejs.org/zh-cn/ 2.安装cnpm: >: npm install -g cnpm --regis ...
第三章、vue-项目前端 - vue配置 | axios配置 | cookies配置 | element-ui配置 | bootstrap配置
目录 vue项目创建环境创建项目重构项目目录文件修订:目录中非配置文件的多余文件可以移除全局配置:全局样式.配置文件 axios前后台交互 cookies操作 element-ui页面组件框 ...
django 结合 bootstrap 使用
git clone https://github.com/dyve/django-bootstrap3.git 要运行demo,需要在demo 中为其增加一个符号链接 bootstrap3 到上层目录 ...

随机推荐

Spring 学习之AOP
1. 走进面前切面编程编程范式: 面向过程编程,c语言: 面向对象编程:c++,java,c#; 函数式编程: 事件驱动编程: 面向切面编程: AOP是一种编程范式,不是编程语言:解决特定问题,不能 ...
Python之函数——基础篇
函数函数,在BASIC中,叫subroutine(子过程或子程序),在Pascal中叫做procedure(过程)和function,在C中只有function,在Java中叫method. 定义: ...
柒月风华BBS上线
论坛地址:https://3003soft.top/LBBS/ 欢迎大家加入. 开放式轻论坛:记录好玩.有趣的事儿:一起努力,一起前进: 希望能建立一个分享各类解决方案的社区
jmap Exception in thread "main" java.io.IOException: 拒绝访问。
环境: 现有一个独立运行的系统S(有独立的jre,但是没jdk),现想通过jmap导出其内存堆栈信息.于是另外安装一个jdk.可是jdk的版本跟S系统的jre不能对应上.出了很多错误. 总是报错: C ...
Selenium Webdriver——操作隐藏的元素
有时候我们会碰到一些元素不可见,这个时候selenium就无法对这些元素进行操作了.例如,下面的情况: 页面主要通过“display:none”来控制整个下拉框不可见.这个时候如果直接操作这个下拉框, ...
HTML5 Canvas ( 线段端点的样式 ) lineCap
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
MySQL优化十大技巧
转自:https://m.2cto.com/database/201701/557910.html MYSQL优化主要分为以下四大方面: 设计:存储引擎,字段类型,范式与逆范式功能:索引,缓存,分区 ...
delphi ios grid BindSourceDB bug
BindSourceDB4.DataSet :=nil; BindSourceDB4.DataSet :=FDMemTable1; grid绑定后显示数据正常,第二次赋值BindSourceDB4.D ...
ListView 操作
TListItem *Item; ; i < ; i++) { Item = ListView1->Items->Add(); Item->Caption = i; } Lis ...
Js 正则限制只能输入数字或中文的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

Django配置Bootstrap, js