1、创建项目
创建Django项目参照https://blog.csdn.net/qq_42148307/article/details/140798249，其中项目名为compute，并在该项目下创建一个名为app的应用，并且进行基本的配置。
2、导入Bootstrap前端框架
Bootstrap的使用参照https://blog.csdn.net/qq_42148307/article/details/140904864。在compute项目的app文件夹下面创建一个名为static的子文件夹，然后将Bootstrap中的css、fontsjs三个子文件夹复制到static文件夹下面。另外,在static文件夹下新建一个名为img的子文件夹用于存放静态图片。
由于创建的在线计算器项目需要采用Ajax发送数据，需要导入jQuery组件来支持Ajax的通信。jQuery是一个快速、简洁的JavaScript框架，是一个优秀的JavaScript代码库。
编辑index.html，其中：
- Django中静态文件的引用。先需要导入Django的静态资源引用标签{%load staticfiles%}，然后在所有的引用路径前需要添加static标记。即采用类似href="{%static'app/css/bootstrap.min.css'%}"这种引用形式。可以简单地将static标记理解成一种文件映射，即映射到项目app中的static文件夹下。
- 在App应用中的static文件夹下找到css子文件夹，然后在该子文件夹style下创建一个.css文件该文件主要是为了定制一些特殊的CSS样式。
- 在<body>部分引用了两个Bootstrap现成的按钮组件，计算按钮因为采用Ajax通信，并没有设计相对应的响应函数。
{% load staticfiles %}
<!DOCTYPE html>
<html><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>在线计算器</title><link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" /><link rel="stylesheet" href="{% static 'css/style.css' %}" /><script src="{% static 'js/jquery.min.js' %}"></script><script src="{% static 'js/bootstrap.min.js' %}"></script>
</head><body><button type = "button" class = "btn btn - success btn - lg btn_clear" id = "lgbut_clear"onclick = "fun_clear">清空</button><button type = "button" class = "btn btn - primary btn - lg" id = "lgbut_compute">计算</button>
</body></html>
