Bootstrap是一个Web前端开发框架,使用它提供的css、js文件可以简单、方便地美化HTML控件。一般情况下,对控件的美化需要我们自己编写css代码,并通过标签选择器、类选择器、ID选择器为指定的控件使用。Bootstrap框架为各种控件定义好了很多的类(class),在引入相关文件后,为控件添加相应的类,控件就变成了这个类所规定的样子了。Bootstrap现在有两个版本,Bootstrap 3和Bootstrap 4。关于Bootstrap的更多信息,请查看相关文档:http://www.bootcscnblogs.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.bootcscnblogs.com/bootstrap/4.1.0/css/bootstrap.min.css"> 8 9 jQuery文件。务必在bootstrap.min.js 之前引入 --> 10 script src="https://cdn.bootcscnblogs.com/jquery/3.2.1/jquery.min.js">script> 11 12 popper.min.js 用于弹窗、提示、下拉菜单 --> 13 script src="https://cdn.bootcscnblogs.com/popper.js/1.12.5/umd/popper.min.js">script> 14 15 最新的 Bootstrap4 核心 JavaScript 文件 --> 16 script src="https://cdn.bootcscnblogs.com/bootstrap/4.1.0/js/bootstrap.min.js">script> 17 18 head> 19 20 body> 21 22 body> 23 html>
在标签中添加一个Button。
1 body> 2 button>一个buttonbutton> 3 body>
运行后结果为:
为这个button添加所属的类(class)。
1 body> 2 button class='btn'>一个buttonbutton> 3 body>
结果为:
按钮的样子发生了变化,点击这个按钮还会出现浅蓝色的边框。为按钮进行其他类的添加。
1 body> 2 button class='btn btn-primary'>一个buttonbutton> 3 body>
结果为:
除了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
熟悉了Bootstrap的基本使用,我们就可以进行登录注册界面的编写了。自己编写css代码也可以写出好看的界面,但使用Bootstrap框架会省去大量的工作,对css的要求也没有那么高。
一、创建一个asp.net空项目并复制数据库到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>
在最外侧写上
点击注册按钮将跳转到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.bootcscnblogs.com/bootstrap/4.1.0/css/bootstrap.min.css"> 9 10 jQuery文件。务必在bootstrap.min.js 之前引入 --> 11 script src="https://cdn.bootcscnblogs.com/jquery/3.2.1/jquery.min.js">script> 12 13 popper.min.js 用于弹窗、提示、下拉菜单 --> 14 script src="https://cdn.bootcscnblogs.com/popper.js/1.12.5/umd/popper.min.js">script> 15 16 最新的 Bootstrap4 核心 JavaScript 文件 --> 17 script src="https://cdn.bootcscnblogs.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.bootcscnblogs.com/bootstrap/4.1.0/css/bootstrap.min.css"> 9 10 jQuery文件。务必在bootstrap.min.js 之前引入 --> 11 script src="https://cdn.bootcscnblogs.com/jquery/3.2.1/jquery.min.js">script> 12 13 popper.min.js 用于弹窗、提示、下拉菜单 --> 14 script src="https://cdn.bootcscnblogs.com/popper.js/1.12.5/umd/popper.min.js">script> 15 16 最新的 Bootstrap4 核心 JavaScript 文件 --> 17 script src="https://cdn.bootcscnblogs.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 //
参与评论
手机查看
返回顶部