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.

扫描二维码关注公众号,回复: 3625358 查看本文章

 

 运行结果为:

再给它添加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代码:

 

登录界面运行结果:

 

 

猜你喜欢

转载自blog.csdn.net/hugejihu9/article/details/83109978