文章来自:源码在线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代码:
登录界面运行结果: