可能很多人是看完狗书才开始学习django的,但一开始对于自己写django项目引入bootstrap模板很能是件有困难的事
本次博客教程的python版本为3.5,bootstrap版本为3.3.37,django版本为2.0(不同版本可能会有稍微不同的操作要求)
- 下载bootstrap
bootstrap下载地址:https://v3.bootcss.com/getting-started/#download,选择第二个,下载带有源码的bootstrap,里面还提供了一些下载好的样式我们可以选择
解压后如下
dist文件是bootstrap的核心文件,别的我们先不管
- 创建新的django工程
我们先新建个文件夹叫做mydjango,在该文件夹下新建django工程,工程名为testdj,(***创建工程方法自行百度,然后自己做基本配置,起码可以在运行后能够在浏览器可以打开,可以看runoob网站教程的django入门教程,http://www.runoob.com/django/django-tutorial.html(明白基本用法,并且会填写最基本的配置就OK)
我们在mydjango/testdj/testdj/下新建文件夹static,然后在static里面新建文件夹bootstrap
找到并打开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类型,单个也要加逗号;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 . import view
from django.conf.urls import *
urlpatterns = [
url(r'^$', view.index),
]上面我们已经做到把视图函数写好并且加到路由里面,接下来开始放置bootstrap了
- 打开一开始下载解压后的文件,找到dist文件夹,将里面的的3个文件夹css,fonts,js进行复制
- 在mydjango/testdj/testdj/下新建文件夹bootstrap,将刚才复制的3个文件夹复制到里面,
从一开始下载的bootstrap的解压文件找到docs/examples里面选择一个本次测试的模板,本次我们选择docs/examples/blog/下的index.html,复制粘贴到mydjango/testdj/templates/下,然后改名为base.html,然后用编辑器打开
找到
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
改为
<link href="/static/bootstap/css/bootstrap.css" rel="stylesheet">找到
<link href="blog.css" rel="stylesheet">
改为
<link href="/static/bootstrap/css/blog.css" rel="stylesheet">找到
<script src="../../dist/js/bootstrap.min.js"></script>
改为<script src="/static/bootstrap/js/bootstrap.js"></script>
(解释一下我们为什么更改,如果你对html代码有所了解的话,会可以看出来我们更改成了自己的路径,可以更好的适应我们的项目结构,顺便你可以查看一下,我下载后bootstrap.min.css里面代码只有几行,代码主要在bootstrap.css里面,要是你的情况和我相反的话填写bootstrap.min.css)找到我们那会下载的/docs/examples/blog/下的blog.css复制粘贴一份到mydjango/testdj/testdj/static/bootstrap/css/里面
然后我们写一个自己的index.html(注意别搞混了)
里面只需要写
{% extends ‘base.html’%}(这是对页面的继承)
一切就绪后打开就可以看到渲染后的页面了
有疑惑的话,可以看我的目录树
static/bootstrap具体目录
可能有的文件你没有,但不用关心,其实static文件的位置挺重要的,如果你要把static放在mydjango/testdj下也可以,只需要将settings.py文件改为
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'collectstatic')
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)别的都一样
项目目录这种东西需要自己经验的,我的这个测试目录可能是不太好的,可以在github上面多看看别人的项目进行学习