jquery官网（第24章 Django开发有便捷）

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

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