bootstrap实现登录注册界面

文章来自：源码在线https://www.shengli.me/css/65.html；

 

Bootstrap是一个Web前端开发框架，使用它提供的css、js文件可以简单、方便地美化HTML控件。Bootstrap框架为各种控件定义好了很多的类（class），在引入相关文件后，为控件添加相应的类，就可以看到想要的样子了，它使开发更快捷，更简单了......

 

bootstrap官网地址，下载地址：http://www.bootcss.com,http://www.runoob.com/bootstrap4/bootstrap4-install.html.

 

实例：

 

html代码：

 

html文件中添加button.

 

 运行结果为：

再给它添加class类

运行结果： 

 

再给它加个class

运行结果：

除了这个这种类还有很多哦，比如btn-secondary,btn-success,btn-info,btn-warning,btn-danger,btn-dark,btn-light,btn-link。

 

如图：

 以上是简单的关于button的小例子，下面咱们来实现登录注册界面吧。

打开Web.config文件，编写数据库连接字符串。

有关创建asp.net空项目、新建App_Data文件夹（文件夹的名字不能更改，否则无法创建数据库的连接）、复制数据库、更改Web.config文件的更多信息，请查看：两种方法实现asp.net方案的前后端数据交互（aspx文件、html+ashx+ajax）。

 

 

二、编写HTML页面

　　右键项目，新建login.html，register.html，login.ashx，register.ashx。有关ashx文件（Generic Handler一般处理程序）和ajax的有关内容、数据库访问的具体语句，请查看：两种方法实现asp.net方案的前后端数据交互（aspx文件、html+ashx+ajax）。

　　打开HTML页面login.html，进行登录表单的编写。

在最外侧写上<form>标签，输入框、标签、按钮就写在<form>里面。一个标签对应一个输入框，把它们放在一个div里并为div添加类form-group。在这个div内部，为input起个ID名字，label中添加属性for，值就是它对应的input输入框的ID。这样设置结构更清晰，也使用了Bootstrap提供的行距、间距等等。如果不这样写，也可以，但可能会遇到一些问题。label和input的display方式都是inline，行内显示。autocomplete=off清除输入框的历史输入记录。在form表单最后，添加两个button。

 

 

点击注册按钮将跳转到register.html进行注册，点击登录按钮，如果用户名和密码正确，则跳转到主界面index.html。

　　为两个button添加事件。window.open("跳转的网址或页面","打开方式")，这是window.open()的一种写法，打开方式有4种：_self,_parent,_top,_blank，_blank是打开一个新的窗口，_self是在当前页面打开目标页面，但这里不知道什么原因，_self参数用不了（没有解决）。这里关于asp.net有个小的提示，当编辑好代码并保存后，点击调试或者右键解决方案管理器中的文件-用浏览器打开，有时候代码并没有更新，需要在浏览器中打开源码进行确认。可以交换使用不同的浏览器进行调试。

在login.html页面中，点击注册按钮将跳转到register.html页面进行注册。下面我们对register.html页面进行编辑。

　　编写register.html页面，和刚才的登录界面大体相同，只是去掉了登录按钮。在ajax的编写里，要特别注意的是异步async要设置成false,读者可以试一下true和false的区别。

注册功能对应的register.ashx文件：

 

 

注册效果图：

 

注册功能编写完成，进行登录功能的编写，在function login(){ $.ajax() }中，与注册界面相同，同样要注意异步async要设置成false。

 

 相应login.ashx代码：

 

登录界面运行结果：