django html5多层网页,Django 学习五：前端页面设计

基本框架搭建好了后，我们就要开始丰富页面内容了。最起码，得有一个用户登录的表单不是么？(注册的事情我们先放一边。)

一、 原生HTML页面

删除原来的login.html文件中的内容，写入下面的代码：

登录

欢迎登录！

用户名：

密码：

简单解释一下：

form标签主要确定目的地url和发送方法；

p标签将各个输入框分行；

label标签为每个输入框提供一个前导提示，还有助于触屏使用；

placeholder属性为输入框提供默认值；

autofocus属性为用户名输入框自动聚焦

required表示该输入框必须填写

passowrd类型的input标签不会显示明文密码

以上功能都是HTML5原生提供的，可以减少你大量的验证和JS代码，更详细的用法，请自行学习。

特别声明：所有前端的验证和安全机制都是不可信的，恶意分子完全可以脱离浏览器伪造请求数据！

启动服务器，访问http://127.0.0.1:8000/login/，可以看到如下图的页面：

14.png-9.4kB

二、引入Bootstrap

如果你的实际项目真的使用上面的那个页面，妥妥的被老板打死。代码虽然简单，速度虽然快，但没有CSS和JS，样子真的令人无法接受，在颜值即正义的年代，就是错误。

然而，大多数使用Django的人都不具备多高的前端水平，通常也没有专业的前端工程师配合，自己写的CSS和JS往往惨不忍睹。怎么办？没关系，我们有现成的开源前端框架！Bootstrap就是最好的框架之一！

前往Bootstrap中文网下载v3.3.7版本代码。建议同时下载用于生产环境的Bootstrap和源码两种版本。最后的Sass版本根据需要，自行决定。

用于生产环境的Bootstrap包含编译并压缩后的 CSS、JavaScript 和字体文件，但不包含文档和源码文件。这通常是给我们Django项目作为静态文件引入的。

而Bootstrap 源码包含Less、JavaScript 和 字体文件的源码，并且带有文档。其中的文档对我们很有用。

在Django的根目录下新建一个static目录，并将解压后的bootstrap-3.3.7-dist目录，整体拷贝到static目录中，如下图所示：

image.png

由于Bootstrap依赖JQuery，所以我们需要提前下载并引入JQuery，我这里使用的是jquery-3.2.1.js，当然别的版本也是可以的。(请自行下载JQuery)

在static目录下，新建一个css和js目录，作为以后的样式文件和js文件的存放地，将我们的jquery文件拷贝到static/js目录下。