Erlo

使用Boostrap框架写一个登录注册界面

时间:2018-10-11 09:58   阅读:24次   来源:博客园页面报错

  Bootstrap是一个Web前端开发框架,使用它提供的css、js文件可以简单、方便地美化HTML控件。一般情况下,对控件的美化需要我们自己编写css代码,并通过标签选择器、类选择器、ID选择器为指定的控件使用。Bootstrap框架为各种控件定义好了很多的类(class),在引入相关文件后,为控件添加相应的类,控件就变成了这个类所规定的样子了。Bootstrap现在有两个版本,Bootstrap 3和Bootstrap 4。关于Bootstrap的更多信息,请查看相关文档:http://www.bootcss.com/http://www.runoob.com/bootstrap4/bootstrap4-install.html


Bootstrap小例子

  新建一个HTML页面,引入在线的Bootstrap CDN。

 1 <html>
 2 <head>
 3     <meta charset="utf-8">
 4     <title>Bootstrap示例</title>
 5     
 6     <!-- 新 Bootstrap4 核心 CSS 文件 -->
 7     <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
 8  
 9     <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
10     <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
11  
12     <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
13     <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
14  
15     <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
16     <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
17     
18 </head>
19 
20 <body>
21 
22 </body>
23 </html>

  在<body>标签中添加一个Button。

1 <body>
2     <button>一个button</button>
3 </body>

  运行后结果为:无样式button

  为这个button添加所属的类(class)。

1 <body>
2     <button class='btn'>一个button</button>
3 </body>

  结果为:btnbutton

  按钮的样子发生了变化,点击这个按钮还会出现浅蓝色的边框。为按钮进行其他类的添加。

1 <body>
2     <button class='btn btn-primary'>一个button</button>
3 </body>

  结果为:btnprimarybutton

  除了btn-primary,还有btn-secondary,btn-success,btn-info,btn-warning,btn-danger,btn-dark,btn-light,btn-link。每一种按钮颜色不同,点击后边框的颜色也不同。

 1 <body>
 2     <button class='btn'>基本按钮</button>
 3     <button class='btn btn-primary'>主要按钮</button>
 4     <button class='btn btn-secondary'>次要按钮</button>
 5     <button class='btn btn-success'>成功</button>
 6     <button class='btn btn-info'>信息</button>
 7     <button class='btn btn-warning'>警告</button>
 8     <button class='btn btn-danger'>危险</button>
 9     <button class='btn btn-dark'>黑色</button>
10     <button class='btn btn-light'>浅色</button>
11     <button class='btn btn-link'>链接</button>
12 </body>

各种样式的button

  各种样式的button

  熟悉了Bootstrap的基本使用,我们就可以进行登录注册界面的编写了。自己编写css代码也可以写出好看的界面,但使用Bootstrap框架会省去大量的工作,对css的要求也没有那么高。


一、创建一个asp.net空项目并复制数据库到App_Data文件夹

  创建一个空项目并复制数据库到App_Data文件夹

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

1   <!-- 数据库连接-->
2   <connectionStrings>
3     <add name="connectionString" 
4          connectionString="Data Source=(LocalDB)MSSQLLocalDB;AttachDbFilename=|DataDirectory|data1.mdf;Integrated Security=True" 
5          providerName="System.Data.SqlClient"/>
6   </connectionStrings>

  有关创建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,进行登录表单的编写。

 1 <body>
 2     <!-- 登录表单 -->
 3     <form style="margin-left:500px;margin-top:200px;">
 4         <div class="form-group">
 5             <label for="user" stype="display:inline;">账户:</label>
 6             <input type="text" class="form-control" id="user" style="display:inline;width:200px;"autocomplete="off" />
 7         </div>
 8         <div class="form-group">
 9             <label for="password" style="display:inline;">密码:</label>
10             <input type="text" class="form-control" id="password" style="display:inline;width:200px;"autocomplete="off" />
11         </div>
12         <button type="submit" class="btn btn-primary">登录</button>
13         <button type="submit" class="btn btn-primary">注册</button>
14     </form>
15 </body>

  在最外侧写上<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有个小的提示,当编辑好代码并保存后,点击调试或者右键解决方案管理器中的文件-用浏览器打开,有时候代码并没有更新,需要在浏览器中打开源码进行确认。可以交换使用不同的浏览器进行调试。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title>登录界面</title>
 6 
 7     <!-- 新 Bootstrap4 核心 CSS 文件 -->
 8     <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
 9 
10     <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
11     <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
12 
13     <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
14     <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
15 
16     <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
17     <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
18 
19     <script>
20         function register() {
21             //跳转到注册界面register.html进行注册
22             window.open("register.html", "_blank");  //_self,_parent,_top,_blank
23         }
24         function login() {
25             //登录逻辑
26         }
27     </script>
28 </head>
29 <body>
30     <!-- 登录表单 -->
31     <form style="margin-left:500px;margin-top:200px;">
32         <div class="form-group">
33             <label for="user" stype="display:inline;">账户:</label>
34             <input type="text" class="form-control" id="user" style="display:inline;width:200px;"autocomplete="off" />
35         </div>
36         <div class="form-group">
37             <label for="password" style="display:inline;">密码:</label>
38             <input type="text" class="form-control" id="password" style="display:inline;width:200px;"autocomplete="off" />
39         </div>
40         <button type="submit" class="btn btn-primary" onclick="login()">登录</button>
41         <button type="submit" class="btn btn-primary" onclick="register()">注册</button>
42     </form>
43 </body>
44 </html>

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

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

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title>注册界面</title>
 6 
 7     <!-- 新 Bootstrap4 核心 CSS 文件 -->
 8     <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
 9 
10     <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
11     <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
12 
13     <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
14     <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
15 
16     <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
17     <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
18 
19     <script>
20         function register() {
21             //jQuery写法
22             var user = $('#user').val();
23             var password = $('#password').val();
24             //JavaScript原生写法
25             //var user = document.getElementById('user').value;
26             //var password = document.getElementById('password').value;
27 
28             $.ajax({
29                 type: "post",  //post put get 等等
30                 url: "register.ashx",
31                 //来源:https://www.erlo.vip/share/3/20608.html
                    
下一篇:CSS3实现的几个小loading效果

评论留言

还没有评论留言,赶紧来抢楼吧~~

Erlo大厅()

* 这里是“Erlo大厅”,在这发言所有人都可以看到。只保留当天信息

  • Erlo.vip2018-10-22 06:16:02Hello、欢迎使用Erlo大厅,这里是个吐槽的地方。
  • 首页 源码分享 新闻资讯 ERLO 搜索
    鼠标试试
    返回顶部