django引入bootstrap模板以及图片显示
python版本:3.5, bootstrap版本:3.3.7, django版本:2.0
一、引入模板
1. 下载bootstrap
bootstrap下载地址:https://v3.bootcss.com/getting-started/#download,选择第二个,下载带有源码的bootstrap,里面还提供了一些下载好的样式我们可以选择,解压后如下:
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了
- 打开一开始下载解压后的文件,找到dist文件夹,将里面的的3个文件夹css,fonts,js进行复制,jquery可自行下载
- 在/test/mydjango/testdj/static下新建文件夹bootstrap,将刚才复制的3个文件夹复制到里面,
- 从菜鸟教程中找到 学习bootstrap3 板块,随便复制一个练习的代码,到mydjango/testdj/templates/下创建名为index.html 的文件,将代码粘贴到文件中,本文所使用代码为 bootstrap创建一个网页
- 找到如下代码:
更改为:<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css"> <script src="/static/bootstrap/jquery/jquery.min.js"></script> <script src="/static/bootstrap/js/bootstrap.min.js"></script>
- 解释一下我们为什么更改,如果你对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 %}
<img src="{% static "my_app/example.jpg" %}" alt="My image"/>