Django项目中使用本地Bootstrap

如何在Django项目中使用下载的Bootstrap, 步骤如下：

1. 下载Bootstrap到本地，bootstrap下载地址：https://v3.bootcss.com/getting-started/#download

2. 在DJango项目的目录下面新建一个static目录，static目录需要于templates在同一级

将下载的bootstrap拷贝到static目录下面，如下图所示：

Django项目中使用本地Bootstrap

3.在settings.py文件中加入如下代码：

# STATIC SETTINGS
STATIC_URL = '/static/'
# BASE_DIR 是项目的绝对地址
#STATIC_ROOT = os.path.join(BASE_DIR, 'collect_static')
#以下不是必须的
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

Django项目中使用本地Bootstrap

4.在templates文件夹下面新建一个base.html, 新建一个blog文件夹，在blog文件夹新建一个页面

Django项目中使用本地Bootstrap

base.html代码如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %}{% endblock %}</title>
    <link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet">

</head>
<body>
    <div class="container">
        {% block content %}

        {% endblock %}

    </div>
<!--JQuerry (necessary for Bootstrap's Javascript plugins)-->
<script src="/static/bootstrap/js/jquery.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

titles.html代码如下：

{% extends "base.html" %}

{% block title %} blog titles {% endblock %}

{% block content %}
<div class="row text-center vertical-middle-sm">
   <h1>我的博客</h1>
</div>
    <div class="row">
       <div class="col-xs-12 col-md-8">
           <ul>
               {% for blog in blogs %}
                  <li>{{ blog.title }}</li>

               {% endfor%}
           </ul>

       </div>
       <div class="col-xs-6 col-md-4">
          <h2>广告</h2>
           <p>跟老七学Python</p>
       </div>
    </div>

{% endblock %}

我是杰克船长，从事测试工作10+年，如果你也热爱测试，可以加我微信xlyu2006,一起学习探讨测试，欢迎~~