用bootstrap写一个详细的项目进程页面,由项目立项表,项目合同表,项目附件表,项目执行等部分组成,每填写完一部分内容,点亮对应进度
时间: 2024-04-30 21:24:24 浏览: 145
很好,下面是一个简单的示例,您可以根据自己的需求进行修改。
HTML代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>项目进程页面</title>
<!-- 引入bootstrap样式 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1 class="text-center my-5">项目进程</h1>
<<ul class="list-group">
<li class="list-group-item">
<div class="row">
<div class="col-9">
<h4 class="mb-3">项目立项表</h4>
<p class="mb-0">填写项目立项表</p>
<p class="text-muted mb-0">请在下面填写项目立项表</p>
</div>
<div class="col-3 text-right">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#project-modal-1">填写</button>
<div class="progress mt-3">
<div class="progress-bar bg-success" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-9">
<h4 class="mb-3">项目合同表</h4>
<p class="mb-0">填写项目合同表</p>
<p class="text-muted mb-0">请在下面填写项目合同表</p>
</div>
<div class="col-3 text-right">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#project-modal-2">填写</button>
<div class="progress mt-3">
<div class="progress-bar bg-success" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
</div>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-9">
<h4 class="mb-3">项目附件表</h4>
<p class="mb-0">填写项目附件表</p>
<p class="text-muted mb-0">请在下面填写项目附件表</p>
</div>
<div class="col-3 text-right">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#project-modal-3">填写</button>
<div class="progress mt-3">
<div class="progress-bar bg-success" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
</div>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-9">
<h4 class="mb-3">项目执行</h4>
<p class="mb-0">项目执行中</p>
<p class="text-muted mb-0">项目正在深入开发中</p>
</div>
<div class="col-3 text-right">
<div class="progress mt-3">
<div class="progress-bar bg-success" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- 项目立项表模态框 -->
<div class="modal fade" id="project-modal-1" tabindex="-1" role="dialog" aria-labelledby="project-modal-title-1" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="project-modal-title-1">项目立项表</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="project-name-1">项目名称</label>
<input type="text" class="form-control" id="project-name-1">
</div>
<div class="form-group">
<label for="project-description-1">项目描述</label>
<textarea class="form-control" id="project-description-1" rows="3"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
</div>
</div>
</div>
</div>
<!-- 项目合同表模态框 -->
<div class="modal fade" id="project-modal-2" tabindex="-1" role="dialog" aria-labelledby="project-modal-title-2" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="project-modal-title-2">项目合同表</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="project-contract-no-2">合同编号</label>
<input type="text" class="form-control" id="project-contract-no-2">
</div>
<div class="form-group">
<label for="project-client-2">客户名称</label>
<input type="text" class="form-control" id="project-client-2">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
</div>
</div>
</div>
</div>
<!-- 项目附件表模态框 -->
<div class="modal fade" id="project-modal-3" tabindex="-1" role="dialog" aria-labelledby="project-modal-title-3" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="project-modal-title-3">项目附件表</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="project-attachment-name-3">附件名称</label>
<input type="text" class="form-control" id="project-attachment-name-3">
</div>
<div class="form-group">
<label for="project-attachment-file-3">上传文件</label>
<input type="file" class="form-control-file" id="project-attachment-file-3">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
</div>
</div>
</div>
</div>
<!-- 引入bootstrap的js文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.slim.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.9.3/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</body>
</html>
```
上述代码中,用到了Bootstrap中的列表组件(`list-group`)、模态框组件(`modal`)、进度条组件(`progress`)等。
其中,每个项目部分都由一个列表组件的项(`list-group-item`)表示,包括一个标题、一个描述、一个填写按钮和一个进度条。填写按钮使用Bootstrap的模态框组件实现,进度条使用Bootstrap的进度条组件实现。
在每个模态框中,可以根据需要添加表单元素。
您可以根据自己的需求进行修改和完善。