三、BootStrap之员工详细信息表案例

已于 2024-05-14 09:06:25 修改
阅读量264 收藏
点赞数 3
分类专栏： Bootstrap基础案例 文章标签： bootstrap dreamweaver 前端
于 2024-05-14 09:05:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Itcodewizard/article/details/138836816
版权

1、运行示例：

2、代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>员工个人信息详情页</title>
		<!--    Bootstrap核心css文件-->
		<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
		<style>
			img{
				width: 120px;
				height: 150px;
			}
			.showparent{
				position: relative;
			}
			.showchild{
				position: relative;
				top:40%;
				left: 0;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<h3 class="m-3 text-center">员工个人信息登记表</h3>
			<div class="row py-1 bg-light text-center no-gutters">
				<div class="col-3"><span class="d-inline-block w-100 h-100 border">公司名称:</span></div>
				<div class="col-9"><input class="w-100" type="text" placeholder="请填写公司名称"></div>
			</div>
			<div class="row clearfix bg-light text-center no-gutters">
				<div class="col-3 float-left">
					<img src="img/1.png" alt="美女">
				</div>
				<div class="col-9 fload-right">
					<div class="row py-2 bg-light text-center no-gutters">
						<div class="col-2"><span class="d-inline-block w-100 h-100 border">姓名:</span></div>
						<div class="col-3"><input type="text" class="w-100" placeholder="姓名"></div>
						<div class="col-3"><span class="d-inline-block w-100 h-100 border">出生日期:</span></div>
						<div class="col-4"><input type="date" class="w-100"></div>
					</div>
					<div class="row py-2 bg-light text-center no-gutters">
						<div class="col-2"><span class="d-inline-block w-100 h-100 border">身份证号:</span></div>
						<div class="col-6"><input type="text" class="w-100" placeholder="身份证号"></div>
						<div class="col-2"><span class="d-inline-block w-100 h-100 border">民族:</span></div>
						<div class="col-2">
							<select class="selected w-100 h-100" name="" id="">
								<option value="1">汉族</option>
								<option value="1">汉族2</option>
								<option value="1">汉族1</option>
							</select>
						</div>
					</div>
					<div class="row py-2 bg-light text-center no-gutters">
						<div class="col-2"><span class="d-inline-block w-100 h-100 border">居住地址:</span></div>
						<div class="col-6"><input type="text" class="w-100" placeholder="居住地址"></div>
						<div class="col-2"><span class="d-inline-block w-100 h-100 border">邮编:</span></div>
						<div class="col-2"><input type="text" class="w-100" placeholder="邮编"></div>
					</div>
				</div>
			</div>
			<div class="row py-1 bg-light text-center no-gutters">
				<div class="col-2"><span class="d-inline-block w-100 h-100 border">工作居住证:</span></div>
				<div class="col-2 border"><input type="checkbox"/> <span>有</span>&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox"/> <span>无</span></div>
				<div class="col-2"><span class="d-inline-block w-100 h-100 border">户口性质:</span></div>
				<div class="col-6 border">
					<input type="checkbox"/> <span>本市城镇</span>&nbsp;&nbsp;&nbsp;&nbsp;
				    <input type="checkbox"/> <span>外市城镇</span>&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="checkbox"/> <span>本市农业</span>&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="checkbox"/> <span>外市农业</span>
				</div>
			</div>
			<div class="row py-1 bg-light text-center no-gutters">
				<div class="col-2"><span class="d-inline-block w-100 h-100 border">联系电话:</span></div>
				<div class="col-2"><input class="w-100" type="text" placeholder="联系电话"></div>
				<div class="col-2"><span class="d-inline-block w-100 h-100 border">户口所在地:</span></div>
				<div class="col-2">
					<select name="" id="" class="selected w-100 h-100">
						<option value="1">北京</option>
						<option value="2">北京1</option>
						<option value="3">北京2</option>
						<option value="4">北京3</option>
					</select>
				</div>
				<div class="col-1"><span class="d-inline-block w-100 h-100 border">省</span></div>
				<div class="col-2">
					<select name="" id="" class="selected w-100 h-100">
						<option value="1">北京</option>
						<option value="2">北京1</option>
						<option value="3">北京2</option>
						<option value="4">北京3</option>
					</select>
				</div>
				<div class="col-1"><span class="d-inline-block w-100 h-100 border">市</span></div>
			</div>
			<div class="row py-1 bg-light text-center no-gutters">
				<div class="col-2 showparent">
					<span class="d-inline-block w-100 showchild">本人简历:</span>
				</div>
				<div class="col-10">
					<table class="table border">
						<thead>
							<tr>
								<th>时间</th>
								<th>公司</th>
								<th>经历</th>
								<th>备注</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>2024.1.2</td>
								<td>某茉网络公司</td>
								<td>担任软件开发工程师</td>
								<td>还行</td>
							</tr>
							<tr>
								<td>2024.1.2</td>
								<td>某茉网络公司</td>
								<td>担任软件开发工程师</td>
								<td>还行</td>
							</tr>
							<tr>
								<td>2024.1.2</td>
								<td>某茉网络公司</td>
								<td>担任软件开发工程师</td>
								<td>还行</td>
							</tr>
							<tr>
								<td>2024.1.2</td>
								<td>某茉网络公司</td>
								<td>担任软件开发工程师</td>
								<td>还行</td>
							</tr>
							<tr>
								<td>2024.1.2</td>
								<td>某茉网络公司</td>
								<td>担任软件开发工程师</td>
								<td>还行</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<div class="row py-1 bg-light text-center no-gutters">
				<div class="col-3"><span class="d-inline-block w-100 h-100 border">所具职业资格:</span></div>
				<div class="col-9"><input class="w-100" type="text" placeholder="请填写所具职业资格"></div>
			</div>
		</div>
	</body>
	<!--引入js文件-->
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
	<!--Bootstrap核心JavaScript文件-->
	<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</html>

Itcodewizard
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
简约简历资料网页模板 Bootstrap4.zip
11-17
简约简历资料网页模板 Bootstrap4.zip
简约Bootstrap个人简历html模板
06-01
一款简约Bootstrap个人简历html模板_蓝色风格无刷新html5个人网站模板
分享45个Bootstrap模板，总有一款适合您
zy0412326的专栏
02-19 1077
知识付费甚欢喜，为咱码农谋福利。jQuery bootstrap响应式多功能购物商城模版。简洁大气的jQuerybootstrap响应式网站模板。jQuery Bootstrap响应式购物商城模板。分享45个Bootstrap模板，总有一款适合您。bootstrap响应式admin后台管理模板。界面简洁的jQuery响应式网站模板。jQuery简洁的响应式购物商城模板。jQuery响应式企业网站模板。
个人网站(bootstrap+css)
05-25
简单的用bootstrap+css的个人网站， 展示自我介绍、兴趣爱好和个人信息界面，制作表单页面收集用户的姓名、兴趣爱好、联系方式等个人信息。兴趣爱好是多级界面包含旅行随笔、自由出行准备、美食和景点界面。
员工信息管理系统，后台使用ssm，前端使用bootstrap、jQuery框架.zip
03-04
项目实践-信息管理系统的设计与开发”，就是这样一个案例，通过采用Java的Spring、SpringMVC（SSM）框架进行后台开发，前端则利用Bootstrap和jQuery框架，构建出一个功能完善、用户友好的员工信息管理系统。...
开发企业级员工信息管理系统
07-03
企业级员工信息管理系统是基于Java技术栈，利用Spring、SpringMVC、Hibernate和Bootstrap等框架构建的高效、稳定且易用的系统。这个项目旨在提供一个全面的解决方案，用于管理和维护企业的员工信息，包括入职、离职...
项目源码_javaweb_java_人事管理_bootstrap_
10-03
开发人员可能使用JDBC（Java Database Connectivity）接口与数据库进行交互，实现员工信息的存储和查询。此外，ORM（Object-Relational Mapping）框架，如Hibernate或MyBatis，可能会被用来进一步简化数据库操作，将...
基于Springboot人力资源管理系统设计源码案例设计.zip
04-19
接着，系统的核心模块包括用户管理、职位管理、招聘管理、员工信息管理、考勤管理等。这些模块的设计通常采用微服务的方式，每个模块作为一个独立的服务，通过RESTful API进行交互。例如，用户管理模块可能包含用户...
python(免积分下载)web员工信息管理系统.zip
09-08
4. **数据库设计**：员工信息表可能包含姓名、职位、入职日期、联系方式等多种字段，需要合理设计数据库模式以优化查询性能和数据一致性。 5. **API接口**：如果系统需要与其他服务或应用交互，可能还会提供RESTful...
【ssm项目源码】员工工资管理系统.zip
08-06
这个系统设计和实现了对员工工资数据的管理，提供了完整的功能模块，包括员工信息管理、工资结构设定、工资计算与发放、报表统计等。下面将详细介绍该系统涉及到的关键技术和知识点。 1. **Spring框架**：Spring是...
Python基于Django超市进销存销售管理系统设计源码案例设计.zip
04-19
每个模型都对应着数据库中的一个表，字段则表示表中的列。 2. 视图逻辑： 视图是Django中处理HTTP请求的核心部分，它根据请求类型（GET、POST等）执行相应操作。例如，视图可以处理用户登录、添加商品、查看库存、...
毕业设计，基于SSM+MySql+Bootstrap开发的人事工资人力资源管理系统，内含Java完整源代码，数据库脚本
01-19
管理员角色包含以下功能：公告信息增删改查,员工增删改查,员工维护,工资信息增删改查,文件信息增删改查,系统用户管理,考勤信息增删改查导出,请假信息管理,部门增删改查,首页等（人事）功能。 可以对应的系统：人事...
毕业设计，基于SSM+MySql+Bootstrap+EasyUI开发的人事管理OA办公系统，内含Java完整源代码，数据库脚本
01-16
毕业设计，基于SSM+MySql+Bootstrap+EasyUI开发的人事管理OA办公系统，内含Java完整源代码，数据库脚本 ...薪酬中心：工资管理，管理员工工资信息，项目管理（包含该项目的费用，员工申请，是否审批）
基于Springboot+Vue月度员工绩效考核管理系统毕业源码案例设计.zip
04-27
网上系统是在MySQL中建立数据表保存信息，运用SpringBoot框架和Java语言编写。并按照软件设计开发流程进行设计实现。系统具备友好性且功能完善。 网上系统在让售信息规范化的同时，也能及时通过数据输入的有效性规则...
记录-Bootstrap编写个人网站主页
m0_37677460的博客
05-14 4301
这次做的是个人简介的一个网站，但只是一个静态的HTML页面。使用到的框架是bootstrap，历时一天半。 一、效果预览 二、代码解析<!DOCTYPE html> <html> <head> <title>changtutu个人网站开发</title> <link rel="stylesheet" href="bs/css/bootstrap.min.css">
JSP基于SSM公司员工考勤人事工资系统设计可升级SpringBoot毕业源码案例设计.zip
02-24
该系统覆盖了人力资源管理中的关键功能，包括员工信息管理、考勤记录、工资计算等，为企业的日常运营提供了信息化支持。 首先，我们来了解SSM架构。SSM是Java Web开发中常见的三层架构模型，其中Spring作为核心容器...
基于Springboot+Vue企业员工薪酬关系系统的设计-毕业源码案例设计.zip
最新发布
04-27
网上系统是在MySQL中建立数据表保存信息，运用SpringBoot框架和Java语言编写。并按照软件设计开发流程进行设计实现。系统具备友好性且功能完善。 网上系统在让售信息规范化的同时，也能及时通过数据输入的有效性规则...
flask bootstrap 详细案例
04-20
好的，我可以回答这个问题。Flask-Bootstrap 是一款集成 Bootstrap 框架的 Flask 扩展包，用于快速开发美观的 Web 应用程序。以下是 Flask-Bootstrap 的详细案例： 1. 安装 Flask 和 Flask-Bootstrap 扩展 ```python pip install Flask pip install Flask-Bootstrap ``` 2. 在 Flask 应用程序中初始化 Flask-Bootstrap 扩展 ```python from flask import Flask from flask_bootstrap import Bootstrap app = Flask(__name__) bootstrap = Bootstrap(app) ``` 3. 在 HTML 模板中使用 Bootstrap 样式和组件 ```html {% extends 'bootstrap/base.html' %} {% block content %} <div class="container"> <h1>Welcome to Flask Bootstrap</h1> <p>This is an example of using Flask Bootstrap to create a responsive web application.</p> <button type="button" class="btn btn-primary">Click Me!</button> </div> {% endblock %} ``` 以上是一个简单的 Flask-Bootstrap 示例，您可以在 Flask 应用程序中使用更多丰富的 Bootstrap 样式和组件来快速构建漂亮的 Web 应用程序。希望能帮助到您！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值