django引入bootstrap模板以及图片显示

django引入bootstrap模板以及图片显示

python版本:3.5, bootstrap版本:3.3.7, django版本:2.0

一、引入模板

1. 下载bootstrap

bootstrap下载地址:https://v3.bootcss.com/getting-started/#download,选择第二个,下载带有源码的bootstrap,里面还提供了一些下载好的样式我们可以选择,解压后如下

django引入bootstrap模板以及图片显示_第1张图片

2. 创建新的django工程

先新建个文件夹叫做test,在该文件夹下新建django项目,项目名为mydiango,新建app 名为testdj

django-admin.py startproject mydjango
cd mydjango
python manage.py startapp testdj

找到并打开setting.py输入如下:(输入到该文件的末尾即可,注意符号)

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'collectstatic')
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'testdj/static'),)  
#STATICFILES_DIRS值为tuple类型,单个也要加逗号;test为项目名,自己写的时候可按照自己要求更改
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'testdj',#这里也添加了

找到并打开view.py补充输入如下:

#最简单的视图函数,返回index.html页面
from django.http import HttpResponse
from django.shortcuts import render
def index(request):
    return render(request, 'index.html')

找到并打开urls.py补充输入如下:

#将之前写好的视图函数import到路由文件,并写到urlpatterns里面使得django可以识别
from testdj.views import *

urlpatterns = [
    path('index', index),#这里第一个index为输入匹配的网址,第二个index为调用views.py里的函数
]

上面我们已经做到把视图函数写好并且加到路由里面,接下来开始放置bootstrap了

  1. 打开一开始下载解压后的文件,找到dist文件夹,将里面的的3个文件夹css,fonts,js进行复制,jquery可自行下载
  2. 在/test/mydjango/testdj/static下新建文件夹bootstrap,将刚才复制的3个文件夹复制到里面,
  3. 从菜鸟教程中找到 学习bootstrap3 板块,随便复制一个练习的代码,到mydjango/testdj/templates/下创建名为index.html 的文件,将代码粘贴到文件中,本文所使用代码为 bootstrap创建一个网页
  4. 找到如下代码:
    	  
    	
    	
    更改为:
    	  
    	
    	
  5. 解释一下我们为什么更改,如果你对html代码有所了解的话,会可以看出来我们更改成了自己的路径,可以更好的适应我们的项目结构。

一切就绪后,输入命令打开就可以看到和菜鸟教程实例一样的界面了。

如果你要把static放在mydjango/下也可以,只需要将settings.py文件改为:

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'collectstatic')
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)

二、图片显示

在setting.py中,定义STATIC_URL,例如:

STATIC_URL = '/static/'

在模板中,使用static模板标签为使用配置的给定相对路径构建URL ,example.jpg 文件位置为/static/my_app/example.jpg

{% load static %}
My image




你可能感兴趣的:(django)