BootStrap表单

最新推荐文章于 2024-04-22 10:35:30 发布

Chengdu.S

最新推荐文章于 2024-04-22 10:35:30 发布

阅读量306

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/modelmd/article/details/83958316

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

BootStrap表单

BootStrap介绍
BootStrap 使用
- 引入相关的 js、css
- 兼容IE浏览器
BootStrap
代码解读
- - JS事件

BootStrap介绍

  Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。为所有开发者、
  所有应用场景而设计。Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。

介绍内容摘自官网¹

预处理脚本

虽然可以直接使用 Bootstrap 提供的 CSS 样式表，不要忘记 Bootstrap 的源码是基于最流行的 CSS 预处理脚本 - Less 
和 Sass 开发的。你可以采用预编译的 CSS 文件快速开发，也可以从源码定制自己需要的样式。

一个框架、多种设备

   你的网站和应用能在 Bootstrap 的帮助下通过同一份代码快速、有效适配手机、平板、PC 设备，这一切都是 
   CSS 媒体查询（Media Query）的功劳。

特性齐全

Bootstrap 提供了全面、美观的文档。你能在这里找到关于 HTML 元素、HTML 和 CSS 组件、jQuery 插件方面的所有详细文档。

BootStrap 使用

引入相关的 js、css

<link rel="stylesheet" href="style/css/bootstrap.min.css">  
<script type="text/javascript" src="style/js/jquery.min.js"></script>
<script type="text/javascript" src="style/js/bootstrap.min.js"></script>

兼容IE浏览器

BootStrap兼容IE², 引入如下文件

<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />

BootStrap

写了个模态框注册、登录, html代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
<title>用户登录</title>
<link rel="stylesheet" href="style/css/bootstrap.min.css">  
<script type="text/javascript" src="style/js/jquery.min.js"></script>
<script type="text/javascript" src="style/js/bootstrap.min.js"></script>
<style type="text/css">
	#horizontal {
		margin-top : 10%;
		margin-bottom : 20%;
		width : 30%;
		padding : 20px;
	}
	.spanblue {
		color: blue;
	}
</style>
<script type="text/javascript">
	function openMotai(id){
		$("#"+id).modal('show');
	}
	
	function rsubmit(){
		alert("1111");
		return ;
	}
	
	function ulogin(){
		$("#loginInfo").html(
		"<b style='color:red;font-size:15px;'>用户名不能为空！</b>");
		//手动关闭模态窗口
		//$("#loginModal").modal('hide');
		return ;
	}
	
	function pwdValidate(){
		var password = $("#password").val();
		var rpassword = $("#rpassword").val();
		if(password != rpassword){
			$("#spanrpassword").html("<b style='color:red;margin-top:auto;'>两次输入密码不相同!</b>");
			$("#spanrpassword").attr('hidden',false);
			document.getElementById("usubmit").disabled=true; 
		}else{
			$("#spanrpassword").attr('hidden',true);
			document.getElementById("usubmit").disabled=false; 
		}
	}
</script>
</head>
<body>
<div class="container" id="horizontal">
	<div class="row">
		<div class="col-xs-6 col-sm-6">
			<a data-toggle="modal" data-target="#registerModal" href="" style="font-size:30px;"><span class="glyphicon glyphicon-user spanblue"></span>注册</a>
		</div>
		<div class="col-xs-6 col-sm-6">
			<a data-toggle="modal" data-target="#loginModal" href="" style="font-size:30px;"><span class="glyphicon glyphicon-log-in spanblue"></span>登录</a>
		</div>
	</div>
</div>
<!-- 注册窗口 -->
<div id="registerModal" class="modal fade" role="dialog">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<h1 class="text-center text-primary">欢迎注册</h1>
				</div>
				<div class="modal-title">
					<!--<h1 class="text-center">注册</h1>-->
				</div>
				<div class="modal-body">
					<form class="form col-md-12 center-block" action="/register" id="registerForm" method="post">
							<div class="form-group">
								<label for="firstName" >用户名</label>
								<input class="form-control" name="username" type="text" id="username" maxlength="10" placeholder="请输入用户名"  autofocus />
								<label id="spanUsername" hidden="true"></label>
							</div>
							<div class="form-group">
								<label for="password" >密码</label>
								<input class="form-control" name="password" type="password" id="password" maxlength="20" placeholder="请输入密码" />
								<label id="spanPassword" hidden="true"></label>
							</div>
							<div class="form-group">
								<label for="rpassword">再次输入密码</label>
								<input class="form-control" name="rpassword" type="password" id="rpassword" maxlength="20" 
									placeholder="请再次输入密码" onblur="pwdValidate()" />
								<label id="spanrpassword" hidden="true"></label>
							</div>
							<div class="form-group">
								<label for="email" >Email</label>
								<input class="form-control" name="email" type="email" id="email" maxlength="20" placeholder="Email" />
								<label id="spanEmail" hidden="true"></label>
							</div>
							<div class="form-group">
								<label for="birthDate" >出生年月</label>
								<input class="form-control" name="birth" type="date" id="birthDate" />
								<label id="spanBirth" hidden="true"></label>
							</div>
							<div class="form-group">
								<label for="">性别</label>
								<div class="row">
									<div class="col-sm-2">
										<label class="radio-inline"> 
											<input name="gender" class="gender" type="radio" id="maleRadio" value="男" checked=true />男
										</label>
									</div>
									<div class="col-sm-2">
										<label class="radio-inline"> 
											<input name="gender" class="gender" type="radio" id="femaleRadio" value="女" />女
										</label>
									</div>
								</div>
							</div>
							<div class="text-right">
								<button class="btn btn-primary" type="button" id="usubmit" onclick="rsubmit()">提交</button>
								<button class="btn btn-danger" data-dismiss="modal">取消</button>
							</div>
							<a href="" data-toggle="modal" data-dismiss="modal" data-target="#loginModal">已有账号？点我登录</a>
					</form>
					<span></span>
				</div>
				<div class="modal-footer"></div>
			</div>
		</div>
</div>


<!-- 登录窗口 -->
<div id="loginModal" class="modal fade" role="dialog">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<h1 class="text-center text-primary">欢迎登录</h1>
				</div>
				<div class="modal-title">
					<!--<h1 class="text-center">欢迎登录</h1>-->
				</div>
				<div class="modal-body">
					<form id="loginForm" action="user/login" method="post" class="form col-md-12 center-block">
						<div class="form-group">
							<input id="lusername" name="username" type="text"
								class="form-control input-lg" placeholder="用户名">
						</div>
						<div class="form-group">
							<input id="lpassword" name="password" type="password"
								class="form-control input-lg" placeholder="登录密码">
						</div>
						<div class="form-group">
							<div id="loginInfo"></div>
						</div>
						<div class="text-right">
							<button id="submit1" class="btn btn-primary" type="button" onclick="ulogin()">立刻登录</button>
							<button class="btn btn-danger" data-dismiss="modal">取消</button>
						</div>
						<a href="" data-toggle="modal" data-dismiss="modal" data-target="#registerModal">还没有账号？点我注册</a>
					</form>
					<span></span>
				</div>
				<div class="modal-footer text-right"></div>
			</div>
		</div>
</div>
</body>
</html>

代码解读

JS事件

 刚开始两次密码一样时候使用的onkeyup事件，后来发现这个不好，换成了onblur事件

js事件³

参考网址
[1]: https://v3.bootcss.com/
[2]: http://bijian1013.iteye.com/blog/1978191
[3]:https://blog.csdn.net/crystal6918/article/details/52934837

BootStrap官网 ↩︎
IE浏览器渲染规则 ↩︎
js学习笔记：事件——事件类型 ↩︎

Chengdu.S

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
BootStrap表单

BootStrap表单BootStrap介绍预处理脚本一个框架、多种设备特性齐全BootStrap 使用引入相关的 js、css兼容IE浏览器BootStrap代码解读JS事件BootStrap介绍 Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。为所有开发者、所有应用场景而设计。Bootstrap 让前端开发更快速、简单...
复制链接

扫一扫