Bootstrap框架和jQuery库的基本使用方法

无需加好友免费技术支持

介绍

前面我们以及学会了Bootstrap框架和jQuery库的基本使用方法，这两个软件包已经集成到我们身上TFPHP在框架中，我们可以使用它们来制作用户管理系统的视图模板。

用户管理系统包括几个主页模板：

1)用户信息表

2)用户登录页面

3)用户注册页面

4)修改个人资料

5)重置登录密码

6)上传用户头像

7)设置安全问题

8)绑定邮箱设置

9）忘记密码页面

页面很多，我们一点一点设计。万事开头难。今天，福哥将带您完成第一个表单页面-用户登录页面。

HTML

登录页面的html部分包括页面和表单。

CSS

用户登录页面CSS也是一个top bar和一个login form两个部分。

用户登录页面

首先，因为这是TFUMS系统的第一个模板，所以福哥首先设计了页面样式。这个页面也将被用作其他页面的共享页面。页面使用bs的nav风格组的风格简化了自己的写作CSS的工作。

其次，使用表单部分bs的form-group样式作为每一行表单项的容器样式，加上label和form-control做一个漂亮的表单很简单。

此外，福哥还使用浮动和清除来实现保存登录状态和忘记密码的左右布局设计。

最后，福哥给button增加了form-control款式，让按钮装满整个容器，看起来更整洁。

今天，我们完成了第一个表单页面的模板，包括：HTML和CSS部分。有了这个基础，制作其他表单页面就容易多了。

下一节课，我们将尝试制作用户注册页面、忘记密码页面、登录密码重置三个页面的模板。