Django配置Bootstrap, js实现过程详解

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' %}" 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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决django xadmin主题不显示和只显示bootstrap2的问题

    异常:python3的xadmin主题只显示默认和bootstrap2 解决办法: 慢慢来 相信能遇到这个问题的人,都是已经配置好xadmin的,该True的也都写过了 首先 找到xadmin文件,不会找的自己百度. 进入xadmin下的plugins文件夹,打开themes.py文件 然后 找到这一段,大概在70行 最后 把 if ex_themes: 这行改为 if len(json.loads(ex_themes)) > 10: 把 if six.PY3: content = conten

  • Django添加bootstrap框架时无法加载静态文件的解决方式

    项目结构如下: 开始时在setting.py中设置如下; html文件中的写法如下: 这样设置一直无法加载静态文件,只需要修改setting.py文件如下: 就可以加载到静态文件了. 补充知识:Django-项目上线后,静态文件配置失效以及404.500页面的全局配置 一.项目上线后静态文件失效 1.因为项目还没上线的时候,django会默认从setting.py中这个设置 STATIC_URL = '/static/' STATICFILES_DIRS = ( os.path.join(BAS

  • Django自定义分页与bootstrap分页结合

    Django自定义分页与bootstrap分页结合

    django中有自带的分页模块Paginator,想Paginator提供对象的列表,就可以提供每一页上对象的方法. 这里的话不讲解Paginator,而是自定义一个分页类来完成需求: class Pagination(object): """用于Model字段值的选择""" def __init__(self): pass @classmethod def create_pagination(self, from_name='', model_

  • Django使用 Bootstrap 样式修改书籍列表过程解析

    Django使用 Bootstrap 样式修改书籍列表过程解析

    展示书籍列表: 首先修改原先的 book_list.html 的代码: <!DOCTYPE html> <!-- saved from url=(0042)https://v3.bootcss.com/examples/dashboard/ --> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html;

  • python设计微型小说网站(基于Django+Bootstrap框架)

    python设计微型小说网站(基于Django+Bootstrap框架)

    一.项目背景: 为了回顾关于django的文件上传和分页功能,打算写一个微型的小说网站练练手.花了一个下午的时间,写了个小项目,发现其中其实遇到了许多问题,不过大部分通过debug之后就解决了,其他部分通过阅读了Pagination插件以及Bootstrap-FileInput插件的官方文档. 二.详细设计: 省去小说网站的用户模块的功能,小说网站主要的功能就是上传文件,在线阅读小说.针对这两个功能, 主要用到dajngo内置的Pagination模块,以及选择一个上传文件插件即可.因为用的是B

  • BootStrap扔进Django里的方法详解

    BootStrap扔进Django里的方法详解

    因为django的版本差异化比较大,所以以下配置仅供学习参考. D:\www\mysite>python --version Python 2.7.5 >>> print django.__version__ 1.9.4 本记录不作细说,主要配置过程如下: 1.settings.py最后一段,关于静态文件的配置 # Static files (CSS, JavaScript, Images) # https://docs.djangoproject.com/en/1.9/howto

  • Django配置Bootstrap, js实现过程详解

    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.A

  • webpack安装配置与常见使用过程详解（结合vue）

    webpack介绍和安装 webpack:前端模块化打包工具 安装webpack需要安装Node.js,Node.js自带软件包管理工具npm 查看自己的node版本: node -v 全局安装webpack cnpm install webpack -g 查看webpack版本 webpack --version 局部安装webpack cnpm install webpack --save-dev 为什么全局安装之后还需要局部安装? 在终端直接执行webpack,使用的是全局webpack

  • java property配置文件管理工具框架过程详解

    这篇文章主要介绍了java property配置文件管理工具框架过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 property property 是 java 实现的 property 框架. 特点 优雅地进行属性文件的读取和更新 写入属性文件后属性不乱序 灵活定义编码信息 使用 OO 的方式操作 property 文件 支持多级对象引用 快速开始 环境依赖 Maven 3.x Jdk 1.7+ Maven 引入依赖 <depende

  • SpringBoot配置拦截器实现过程详解

    目录 如何配置拦截器 拦截器设置容易出现的问题 如何取消拦截操作 实例-登录验证 如何配置拦截器 step1: 自定义拦截器 /** * 自定义拦截器 */ public class MyInterceptor implements HandlerInterceptor { private static final Logger logger = LoggerFactory.getLogger(MyInterceptor.class); /** * 在请求匹配controller之前执行,返回t

  • CentOS 7下安装 redis 3.0.6并配置集群的过程详解

    安装依赖 [root@centos7-1 ~]# yum -y install gcc openssl-devel libyaml-devel libffi-devel readline-devel zlib-devel gdbm-devel ncurses-devel gcc-c++ automake autoconf 安装 redis [root@centos7-1 ~]# wget http://download.redis.io/releases/redis-3.0.6.tar.gz [

  • django 捕获异常和日志系统过程详解

    这一块的内容很少, 异常使用try except即可, 日志只需要几行配置. 使用装饰器捕获方法内的所有异常 我使用装饰器来整个包裹一个方法, 捕获方法中的所有异常信息.并将其转为json返回客户端. import functools def catch_exception(func, code=500, *args, **kwargs): ''' :param func: :return: ''' @functools.wraps(func, *args, **kwargs) def nefe

  • Django实现跨域请求过程详解

    Django实现跨域请求过程详解

    前言 CORS 即 Cross Origin Resource Sharing 跨域资源共享. 跨域请求分两种:简单请求.复杂请求. 简单请求 简单请求必须满足下述条件. HTTP方法为这三种方法之一:HEAD.GET.POST HTTP头消息不超出以下字段: Accept.Accept-Language.Content-Language.Last-Event-ID 且Content-Type只能为下列类型中的某一个: application/x-www-from-urlencoded mult

  • Django models.py应用实现过程详解

    Django models.py应用实现过程详解

    编写 models.py 文件 from django.db import models # Create your models here. class User_info(models.Model): username = models.CharField(max_length=25,verbose_name='用户名') password = models.CharField(max_length=25,verbose_name='密码') age = models.IntegerFiel

  • Django 源码WSGI剖析过程详解

    Django 源码WSGI剖析过程详解

    前言 python 作为一种脚本语言, 已经逐渐大量用于 web 后台开发中, 而基于 python 的 web 应用程序框架也越来越多, Bottle, Django, Flask 等等. 在一个 HTTP 请求到达服务器时, 服务器接收并调用 web 应用程序解析请求, 产生响应数据并返回给服务器. 这里涉及了两个方面的东西: 服务器(server)和应用程序(application). 势必要有一个合约要求服务器和应用程序都去遵守, 如此按照此合约开发的无论是服务器还是应用程序都会具有较大

  • 基于 Django 的手机管理系统实现过程详解

    基于 Django 的手机管理系统实现过程详解

    一.概述 打算通过设计数据库,然后结合 Python 框架Django,实现在网页上对数据库的增删改查(本例以手机的管理为例,不考虑订购功能),有普通用户界面和管理员用户界面,普通用户只能做简单的查看需求,管理员用户可以实现对数据库内容的实时修改. 网站主体如下图: 二.设计数据库 根据业务需求,设计数据表,需要下列这些属性: 手机型号.品牌.手机描述.出厂年份.价格.照片.产地. 根据数据表设计原则,数据表设计需要满足基本的函数依赖和范式要求,因此我们将上述属性拆分为四张表格,并建立这些数据表

随机推荐