自从有了Bootstrap等模板UI后，程序猿犹如去西天取经的猪八戒一样，好吃懒做，也很"好色"，不用怀疑，就算是这样的，照样能取得到真经。不知道怎么"偷懒"的程序猿不是好工程师。

为了实现美丽的界面效果，咱们需要干点活。

24.1 下载文件

去Bootstrap官网:https://getbootstrap.com/docs/4.1/getting-started/download/下载压缩包(bootstrap-4.1.3-dist.zip)。

bootstrap.js依赖jquery.js 和 popper.js 才能正常运行。

去jquery官网: https://jquery.com/download/下载jquery-3.4.1.min.js。

去popper官网: https://popper.js.org/下载popper.min.js(版本号为：1.15.0)，或直接从https://unpkg.com/popper.js@1.15.0/dist/umd/popper.min.js进行下载。

去网上下载一张png图片，当做logo使用，图片大小为48*48。

24.2 文件安放

解压缩bootstrap-4.1.3-dist.zip文件，把里面js下的bootstrap.min.js拷贝到static/department/js文件夹下；把里面css下的bootstrap.min.css拷贝到static/

department/css文件夹下。

把jquery-3.4.1.min.js和popper.js文件拷贝到static/department/js文件夹下。

把logo.png文件拷贝到static/department/images文件夹下。

24.3 CSS文件

在static/department/css文件夹下新建form.format.css文件，内容是这样的。

/*错误提示 */.errorlist {list-style:none;padding:0 5px;margin:0;color: red;}/*按钮左边距 */.btn-left {margin-left: 15px;}/*表格行间距 */.table-span {border-collapse:separate;border-spacing:0 0.3rem;}

24.4 共享模板

模板文件全部建好后，进入代码秀时代，吟诗句，编代码。

横看成岭侧成峰,远近高低各不同。不识庐山真面目,只缘身在此山中。header.html吟。

{% load static %}

销售管理系统

部门管理

这一节内容有点多，更多有关共享模板的实现功能，下一节继续介绍。