基于bootstrap的资源上传界面

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="asserts/bootstrap-3.3.7-dist/css/bootstrap.css"/>
	<style type="text/css">
		.login-box{
			margin-top: 100px;
			height: 500px;
			border: 1px solid #000;
		}
		body{
			background: #000;
		}
		.btn1{
			width: 200px;
		}
		.d1{
			display: block;
			height: 400px;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="login-box col-md-12">
		<form class="form-horizontal">
			<h1>资源上传</h1>
			<hr />
			<div class="form-group">
				<label class="col-sm-2 control-label">选择文件:</label>
				<div class="input-group col-sm-10">
					<div >
					<label for="">
						<button class="btn btn-primary btn-lg">+选择文件</button>
					</label>
					<label for="">
						<p style="color: red">请选择文件,限制50M以内</p>	
					</label>
					</div>
				</div>
			</div>
		
		<div class="form-group">
			<label class="col-sm-2 control-label">资源名称:</label>
			<div class="input-group  col-sm-6">
				<input type="text" class="form-control "  placeholder="请输入资源名称"/>
			</div>
		</div>
		
		<div class="form-group">
			<label class="col-sm-2 control-label">关键词:</label>
			<div class="input-group  col-sm-6">
				<input type="text" class="form-control "  placeholder="请输入关键词,用“,”"/>
			</div>
		</div>
		
		<div class="form-group">
			<label class="col-sm-2 control-label">下载所需积分:</label>
			<div class="input-group  col-sm-6">
				<input type="text" class="form-control "  placeholder="最多10分"/>
			</div>
		</div>
		
		<div class="form-group ">
			<label class="col-sm-2 control-label">资源简介:</label>
			<div class="input-group  col-sm-6">
			<textarea class="form-control"  placeholder="请输入资源描述,不支持HTML标签,请详细填写以便于作为推荐资源以赚取更多积分,如描述不清可能会无法审核通过"></textarea>
			</div>
		</div>
		
		<div class="col-sm-8  text-right">
			<button class="btn btn-success text-right btn1">上传</button>
		</div>
		</form>
        </div>
	</div>
</body>
</html>

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
基于Bootstrap的新员工入职登记单页应用界面设计 要求: 使用广泛使用的CSS框架Bootstrap,设计一个公司人力资源部门使用的新员工入职登记的单页应用界面。该界面应包含以下要素: 1、公司Logo和标题:显示公司的标识和名称。 2、表单元素:包含输入框、下拉菜单、单选按钮等,用于输入员工的个人信息,如姓名、性别、出生日期、联系方式等。要求添加合适的表单验证机制,确保员工输入的信息符合要求。 3、图片上传功能:提供一个图片上传按钮,用于员工照片的上传上传的图片要求进行大小和格式验证,并显示上传进度和预览图像。 4、入职日期选择:使用日期选择器组件,让员工选择入职日期。 5、备注文本框:提供一个文本框,供员工输入备注信息。 6、提交按钮:一个提交按钮,用于提交员工信息。点击提交后,要进行表单验证,验证通过后将员工信息保存或发送到服务器,并显示成功或失败的消息。 7、员工列表:在界面上显示已登记的员工列表,包括姓名、职位、入职日期等信息。列表要支持分页和搜索功能。 8、员工详细信息展示:点击员工列表中的某个员工,显示该员工的详细信息,包括照片、个人信息和备注等。 9、编辑和删除功能:在员工详细信息展示界面,添加编辑和删除按钮,允许对员工信息进行修改和删除操作。
最新发布
06-03

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值