django项目引入bootstrap

• 下载bootstrap

下载地址:https://v3.bootcss.com/getting-started/#download,选择第二个,下载带有源码的bootstrap,只能通过这种方式(django是封闭的)

下载的目录结构:

      

• 创建一个简单Demo项目,这是我的项目
• 

注意:在根项目下创建一个static目录,再在static下创建一个bootstrap文件夹,找到并打开setting.py输入如下;(输入到该文件的末尾即可,注意符号)

1. STATIC_URL = '/static/
2. STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)

    打开一开始下载解压后的文件,找到dist文件夹,将里面的的3个文件夹css,fonts,js进行复制
    在untitled/static/下新建文件夹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>
---------------------

我们更改成了自己的路径,可以更好的适应我们的项目结构

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

然后我们写一个自己的index.html(注意别搞混了)

里面只需要写
{% extends ‘base.html’%}(这是对页面的继承)
---------------------

ok,运行django, 在django中输入url就可以看到一个博客模板了

下面是我的目录结构

总结: 下载下来的bootstrap包含了很多网页模板,比如导航条, 博客模板等等 以后想使用其他的模板只需要下面几步:

1. 粘贴模板到自己项目的templates下, 到D:ootstrapootstrap-3.3.7docsexamples 下面的模板粘贴到 项目的templates下建立一个base模板
2. 创建static,到setttings中设置检索路径,在这之前还需要把 D:ootstrapootstrap-3.3.7dist下的的三个文件夹(css, js, fonts)粘贴到static下的bootstrap()自己新建的)下面,
3. 把bootstrap模板中的css文件复制到 staticootstrapcss 文件中
4. 在templatesase.html中 对css和js 外联路径进行更改,其实就是把原先从网上连接改为本地文件的连接