(一)Bootstrap模板如何导入django项目

(一)Bootstrap模板如何导入django项目

1准备阶段

• Bootstrap前端模板

• 地址：https://v3.bootcss.com/getting-started/#download

• 下载第二个（即下载源码）

• 下载完后进行解压

               

                Dist ：bootstrap 的核心，包括css,font,js

 

               Docs：一些前端网页模板

2 具体步骤

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

STATIC_URL = '/static/'

STATIC_ROOT = os.path.join(BASE_DIR, 'collectstatic')

STATICFILES_DIRS = (os.path.join(BASE_DIR, 'testdj/static'),) 

• 在我的应用目录下新建static文件夹:

并将dist下的三个文件夹复制到static 下

• 在django项目路径下新建目录：templates/应用名（myApp）；

并选择解压文件夹中…\docs\examples\blog中的index复制新建的目录下

• 在myApp（我的应用）中的views.py文件中写下视图：

def index(request):

    return render(request,'myApp/index.html')

• 配置urls.py,即配置路径 ：

          url(r'^index/$', views.index),

• 打开index.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> 

• 找到我们那会下载的/docs/examples/blog/下的blog.css复制粘贴一份到mydjango/testdj/testdj/static/bootstrap/css/里面