Bootstrap4、jquery.js、popper.js 下载链接：
链接：https://pan.baidu.com/s/1HZ19327TDMtgkH5mXbRIcA
提取码：nx9p
一、配置Bootstrap 4
Bootstrap
是用于网站开发的开源前端框架，下载好
Bootstrap4
之后解压。
然后在项目根目录下新建目录
static/bootstrap/
，用于存放Bootstrap静态文件。静态文件通常指那些不会改变的文件。Bootstrap中的css、js文件，就是静态文件。
把刚才解压出来的
css
和
js
两个文件夹复制进去。
因为bootstrap.js依赖jquery.js和popper.js才能正常运行，因此这两个文件也需要下载并保存。
配置完之后的static目录如下：
因为在Django中需要指定静态文件的存放位置，才能够在模板中正确引用它们，因此在
settings.py
的末尾加上：
二、编写模板
在根目录下的
templates/
中，新建三个文件：
-
base.html
-
header.html
-
footer.html
这三个文件在每个页面中通常是不变的，独立出来可以避免重复写相同的代码，提高可维护性。
templates/
现在的目录结构如下：
2.1、编写base.html文件
<!-- 载入静态文件 -->
{% load staticfiles %}
<!DOCTYPE html>
<!-- 网站主语言 -->
<html lang="zh-cn">
<head>
<!-- 网站采用的字符编码 -->
<meta charset="utf-8">
<!-- 预留网站标题的位置 -->
<title>{% block title %}{% endblock %}</title>
<!-- 引入bootstrap的css文件 -->
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
</head>
<body>
<!-- 引入导航栏 -->
{% include 'header.html' %}
<!-- 预留具体页面的位置 -->
{% block content %}{% endblock content %}
<!-- 引入注脚 -->
{% include 'footer.html' %}
<!-- bootstrap.js依赖 jquery.js 和 popper.js ，因此在这里引入 -->
<script src="{% static 'jquery/jquery-3.3.1.js' %}"></script>
<!--
popper.js采用cdn远程引入，意思是不需要把它下载到本地。
在实际开发中推荐静态文件尽量都使用cdn的形式。
教程采用本地引入是为了让读者了解静态文件本地部署的流程
-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<!-- 引入bootstrap的js文件 -->
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
</body>
</html> - 模板中要加上
{% load staticfiles %}
{% static 'path' %}
- 留意Bootstrap的css、js文件分别是如何引入的；
-
jquery.js
popper.js
bootstrap.js
2.2、编写header.html文件
<!-- 定义导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<!-- 导航栏商标 -->
<a class="navbar-brand" href="#">我的博客</a>
<!-- 导航入口 -->
<div>
<ul class="navbar-nav">
<!-- 条目 -->
<li class="nav-item">
<a class="nav-link" href="#">文章</a>
</li>
</ul>
</div>
</div>
</nav> 2.3、编写list.html文件
<!-- extends表明此页面继承自base.html文件 -->
{% extends "base.html" %}
{% load staticfiles %}
<!-- 写入 base.html 中定义的 title -->
{% block title %}
首页
{% endblock title %}
<!-- 写入 base.html 中定义的content -->
{% block content %}
<!-- 定义放置文章标题的div容器 -->
<div class="container">
<div class="row mt-2">
{% for article in articles %}
<!-- 文章内容 -->
<div class="col-4 mb-4">
<!-- 卡片容器 -->
<div class="card h-100">
<!-- 标题 -->
<h4 class="card-body">{{ article.title }}</h4>
<!-- 摘要 -->
<div class="card-body">
<p class="card-text">{{ article.body|slice:'100' }}</p>
</div>
<!-- 注脚 -->
<div class="card-footer">
<a class="btn btn-primary" href="#">阅读文本</a>
</div>
</div>
</div>
{% endfor %}
</div>
</div> - 留意
{% block title %}
{% block content %}
base.html
- 摘要中的
{{ article.body|slice:'100' }}
|slice:'100'
2.4、编写footer.html文件
{% load staticfiles %}
<!-- Footer -->
<div>
<br><br><br>
</div>
<footer class="py-3 bg-dark fixed-bottom">
<div class="container">
<p class="m-0 text-center text-white">Copyright © www.wangjichuan.cn 2020</p>
</div>
</footer> 2.5、宏观分析
当我们通过
url
(http://127.0.0.1:8000/article/article-list)访问
list.html
时，顶部的
{% extends "base.html" %}
告诉Django：“这个文件是继承
base.html
的，你去调用它吧。”
于是Django就老老实实去渲染
base.html
文件：
- 其中的
{% include 'header.html' %}
header.html
-
{% include 'footer.html' %}
footer.html
-
{% block content %} {% endblock content %}
list.html
三、查看效果
保存全部文件，进入虚拟环境，运行开发服务器