用bootstrap实现一个简单的资源注册页面

最新推荐文章于 2024-06-30 12:00:24 发布
最新推荐文章于 2024-06-30 12:00:24 发布
阅读量881 收藏
点赞数
分类专栏： 前端之bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CelticsBing/article/details/104403073
版权

页面样例
在这里插入图片描述

<body class="container body-div">
	<!--form表单-->
	<form class="form-horizontal"  id="res-info-form">
		<!--表示一个面板，class名称是固定的，注1-->
		<!--如果需要对div进行操作，可以加id，如baseinfo-body，注2-->
		<div class="panel panel-default">
			<div class="panel-heading"><%=baseInfo%></div>
			<div class="panel-body" id="baseinfo-body">
				<!--元素换行，注3-->
				<div class="form-group">
					<label class="col-sm-2 control-label"><%=resName%>&nbsp;<span style="color:red">*</span></label>
					<div class="col-sm-7">
						<input class="form-control" id="resName-input" type="" maxlength="64" placeholder="" autocomplete="off">
					</div>
				</div>
				<%-- <div class="form-group">
					<label class="col-sm-2 control-label">资源组&nbsp;<span style="color:red">*</span></label>
					<div class="col-sm-7" id="menu-content">
						<input class="form-control" id="resGroup-input" style="cursor:pointer;" readonly="readonly">
						<!-- <div class="menucontent" id="group-menu" style="left: 5px; right: 5px; display: block;">
							<ul class="ztree" id="group-tree" style="margin-top:0;"></ul>
						</div> -->
					</div>
				</div> --%>
			</div>
		</div>
		<div class="panel panel-default">
			<div class="panel-heading"><%=connInfo%></div>
			<div class="panel-body" id="conninfo-body">
				<div class="form-group">
					<label class="col-sm-2 control-label"><%=srcResType%>&nbsp;<span style="color:red">*</span></label>
					<div class="col-sm-7">
						<select  id="src-dev-select" class="form-control selectpicker show-tick" title="" onchange="srcDevSelectChange()"></select>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label"><%=srcResIp%>&nbsp;<span style="color:red">*</span></label>
					<div class="col-sm-7">
						<select  id="src-ip-select" class="form-control selectpicker show-tick" title="" data-live-search="true" onchange="srcIpSelectChange()"></select>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label"><%=srcResName%>&nbsp;<span style="color:red">*</span></label>
					<div class="col-sm-7">
						<input class="form-control" id="src-dev-name" type="" maxlength="64" placeholder=""  disabled="disabled">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label"><%=srcResPort%>&nbsp;<span style="color:red">*</span></label>
					<div class="col-sm-7">
						<select  id="src-port-select" class="form-control selectpicker show-tick" title="" data-live-search="true"></select>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label"><%=desResType%>&nbsp;<span style="color:red">*</span></label>
					<div class="col-sm-7">
						<select  id="des-dev-select" class="form-control selectpicker show-tick" title="" onchange="desDevSelectChange()"></select>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label"><%=desResIp%>&nbsp;<span style="color:red">*</span></label>
					<div class="col-sm-7">
						<select  id="des-ip-select" class="form-control selectpicker show-tick" title="" data-live-search="true" onchange="desIpSelectChange()"></select>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label"><%=desResName%>&nbsp;<span style="color:red">*</span></label>
					<div class="col-sm-7">
						<input class="form-control" id="des-dev-name" type="" maxlength="64" placeholder=""  disabled="disabled">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label"><%=desResPort%>&nbsp;<span style="color:red">*</span></label>
					<div class="col-sm-7">
						<select  id="des-port-select" class="form-control selectpicker show-tick" title=""  data-live-search="true"></select>
					</div>
				</div>
				<%-- <div class="form-group">
					<label class="col-sm-2 control-label">管理节点&nbsp;</label>
					<div class="col-sm-7">
						<select  id="node-select" class="form-control selectpicker show-tick"></select>
					</div>
				</div> --%>
			</div>
		</div>
		
		<div class="panel panel-default">
			<div class="panel-heading"><%=businessInfo%></div>
			<div class="panel-body">
				<div class="form-group">
					<label class="col-sm-2 control-label"><%=manager%>&nbsp;</label>
					<div class="col-sm-7">
						<input class="form-control" id="manager-input" type="" maxlength="64" placeholder="" autocomplete="off">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label"><%=phone%>&nbsp;</label>
					<div class="col-sm-7">
						<input class="form-control" id="phone-input" type="" placeholder="" name="phoneNum" autocomplete="off">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label"><%=email%>&nbsp;</label>
					<div class="col-sm-7">
						<input class="form-control" id="email-input" type="" maxlength="64" placeholder="" name="emailAddr" autocomplete="off">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label"><%=location%>&nbsp;</label>
					<div class="col-sm-7">
						<input class="form-control" id="location-input" type="" maxlength="64" placeholder="" autocomplete="off">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label"><%=memo%>&nbsp;</label>
					<div class="col-sm-7">
						<input class="form-control" id="memo-input" type="textarea" maxlength="64" placeholder="" autocomplete="off">
					</div>
				</div>
			</div>
		</div>
		<div style="text-align:center;">
				 <button class="btn btn-self" id="btn-saveConfig" type="button"><%=save%></button>
				 <button class="btn btn-self" id="btn-testConfig" type="button"><%=testConnetion%></button>
				 <button class="btn btn-self" id="btn-cancel" type="button"><%=cancel%></button>
		 </div>
	</form>
</body>

注1：面板固定 class

面板整体 
class="panel panel-default"

面板头   
class="panel-heading"

面板体   
class="panel-body"

注2：设置判断条件，满足条件时给一个 div 加入特定元素

将在 jsp 中写死的代码注释掉，改成在 js 中动态生成

选择 $("#baseinfo-body") 元素进行 append。调用 append 方法的元素应该是待添加元素的上一层 div
在这里插入图片描述

if(!data.result){
	$("#baseinfo-body").append(
			'<div class="form-group">'+
			    '<label class="col-sm-2 control-label">'+LinkConfig_I18N.link_resource_group+'&nbsp;<span style="color:red">*</span></label>'+
			    '<div class="col-sm-7" id="menu-content">'+
			        '<input class="form-control" id="resGroup-input" style="cursor:pointer;" readonly="readonly">'+
		        '</div>'+
	         '</div>'
			);
	  // 如果不写在这里(原本写在最上面页面初始化的代码中了)，会导致进不到click事件中
	  // 因为在页面初始化时还没有生成resGroup-input这个元素
	  $('#resGroup-input').click(function() {
	　    	   if(checkIndex == 0){
	　    		    initGroupTree();
	　    	   }
	　    	   else if(checkIndex == 1){
	　    		   showMenu();
	　    	   }
	　    	   else{
	　    		   hideMenu();
	　    	   }
　       });
    displayGroupSelsct = true;
}
else{
	displayGroupSelsct = false;
}

注3：ztree使用入门

注4：元素换行

<div class="form-group">
	<!--表单元素-->
</div>

参考文件：linkCustom.jsp，linkConfig.js

凯尔特多
关注
专栏目录
bootstrp实现注册页面
HSS2294216348的博客
07-11 625
效果图片 ​​​​​​ 下面展示一些 内联代码片。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <link rel="stylesheet" type="text/c
Bootstrap注册页面
qq_36943809的博客
12-17 1013
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" h...
Bootstrap制作登录注册页面（完整项目，已配置）
12-03
使用Bootstrap制作简单的用户注册页面，用户登录页面。此文件为项目压缩包，环境已配置。
基于bootstrap的12种登录注册页面模板
最新发布
u012604801的博客
06-30 673
基于bootstrap的12种登录注册页面模板，分三种类型，默认简单的登录和注册，带背景图片的登录和注册，支持弹窗的登录和注册页面html下载。
使用bootstrap写一个注册页面
php的绯闻女友
06-10 3109
效果是这样，qi'z：
bootstrap做简单大气的登录注册页面
05-10
bootstrap做登录注册页面带验证
12-15
用bootstrap做的登录，注册页面，使用validate进行表单验证，是本人从空白页面搭建的，亲测可用，1积分算是我的辛苦费吧。 我会通过博客注明知识点：http://blog.csdn.net/qq_19558705； 希望能帮到大家。没有积分的小伙伴可以私信我，我加qq发给你
使用bootstrap写一个实用的注册页面
13号同学的博客
01-01 2083
功能： 1、可以查看/隐藏密码 2、校验手机号 3、发送信息60秒倒计时 准备好 jquery-1.10.2.min.js bootstrap.min.js 代码： <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <meta chars...
Bootstrap用法（实现注册页面）
1匹黑马
10-30 5304
文章目录安装测试是否可用基本用法栅格系统导航实现留言板注册界面 安装 去官网下载bootstrap，下载用于生产环境的版本 下载jQuery，直接复制链接用迅雷下载js文件即可 提取bootstrap中的bootstrap.min.js和bootstrap.min.css 把三个文件（bootstrap.min.js、bootstrap.min.css、jquery-3.5.1.min.js）整合到一个js文件夹中 测试是否可用 上个代码看看： <!DOCTYPE html> <htm
bootstrap登录注册页面模板.zip
07-28
总结来说，"bootstrap登录注册页面模板.zip"为JavaWeb开发者提供了一个快捷、美观的解决方案，用于创建登录和注册页面。利用Bootstrap的强大功能，开发者可以专注于后端逻辑，而无需花费大量时间在前端设计上，从而...
实用的bootstrap登录注册页面.zip
08-19
在“实用的bootstrap登录注册页面.zip”这个压缩包中，包含了12款基于Bootstrap构建的登录和注册页面模板，这些模板具有良好的响应式设计，能够适应各种屏幕尺寸，从手机到桌面电脑都能提供一致的用户体验。...
bootstrap简易登录注册页面
03-30
资源共享bootstrap简易登录注册页面
基于BootStrap实现简洁注册界面
08-29
主要介绍了基于BootStrap实现简洁注册界面,需要的朋友可以参考下
使用bootstrap做的登陆、注册、忘记密码页面
06-29
本文件包含登陆、注册、找回密码三个页面，使用bootstrap开发框架，界面简洁大方。
Bootstrap登陆注册页面开发教程
11-25
Bootstrap登陆注册功能比较简单， 主要参考bootstrap 表单功能（http://v3.bootcss.com/css/#forms） 大家也可以参考这篇关于bootstrap 表单基本知识点的文章进行学习：《Bootstrap每天必学之表单》 遇到的问题 点击submit 提交， 抓包工具没有抓取到相应的表单数据， 问题原因在于， form 表单的数据都是通过 表单中 的name 属性进行提交的， 而我们之前直接从 bootstrap 上拷贝的代码中没有name 属性， 因而导致没有相应的数据传送出来 工程地址 https://github.com/digitalClass/w
php登录注册系统讲解_bootstrap做一个登入注册页面的详解
weixin_42524824的博客
03-09 1184
本篇文章给大家带来的内容是关于bootstrap做一个登入注册页面的详解，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。本章内容是用bootstrap做的登入注册页面，并使用jquery-validate进行表单验证。技术：bootstrap，font-awesome，jquery-validate；特点：响应式布局，表单验证，背景图片自适应屏幕大小；宗旨：从实战中学知识。效果图：...
基于bootstrap的一套页面
01-10
总的来说，"基于bootstrap的一套页面"提供了一个完整的网页设计解决方案，无论是对于初学者还是经验丰富的开发者，都是一个宝贵的资源。通过Gentelella-master，你可以快速启动一个新的项目，或者为现有的网站添加新...
2023.11.15使用bootstrap做一个简洁的注册页面
leigh_chen的博客
11-15 513
设置密码必须大于等于6位，并且包含大写字母、小写字母、特殊字符或者数字中的三种。
BootstrapValidator：实现实用注册与登录验证及错误提示
BootstrapValidator是一个强大的前端表单验证库，它与Bootstrap集成，提供了丰富的客户端验证功能，适用于提升Web应用程序的用户体验。本文将详细介绍如何在AdminEAP框架中利用BootstrapValidator实现注册和登录页面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值