自从有了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 %}

<header class="py-2 bg-dark text-white fixed-top">

<div>

<div class="d-flex flex-row align-items-center">

<div><img src="{% static 'department/images/logo.png' %}" alt="logo"/></div>

<div>销售管理系统</div>

<div>部门管理</div>

</div>

</div>

</header>

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