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"/>

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

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

猜你喜欢