使用Bootstrap构建看板界面 - HTML代码示例
以下是使用HTML和Bootstrap完成的看板界面的代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.1/css/bootstrap.min.css">
<title>看板界面</title>
</head>
<body>
<div class="container">
<h1>主界面</h1>
<div class="accordion" id="optionsAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="newModelHeading">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#newModelCollapse"
aria-expanded="true" aria-controls="newModelCollapse">
新建型号
</button>
</h2>
<div id="newModelCollapse" class="accordion-collapse collapse" aria-labelledby="newModelHeading"
data-bs-parent="#optionsAccordion">
<div class="accordion-body">
<!-- 新建型号表单 -->
<form>
<div class="mb-3">
<label for="modelName" class="form-label">型号名称</label>
<input type="text" class="form-control" id="modelName">
</div>
<div class="mb-3">
<label for="modelCode" class="form-label">型号代号</label>
<input type="text" class="form-control" id="modelCode">
</div>
<div class="mb-3">
<label for="modelCategory" class="form-label">型号分类</label>
<input type="text" class="form-control" id="modelCategory">
</div>
<button type="submit" class="btn btn-primary">确认</button>
<button type="button" class="btn btn-secondary">取消</button>
</form>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="editModelHeading">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#editModelCollapse" aria-expanded="false" aria-controls="editModelCollapse">
编辑型号
</button>
</h2>
<div id="editModelCollapse" class="accordion-collapse collapse" aria-labelledby="editModelHeading"
data-bs-parent="#optionsAccordion">
<div class="accordion-body">
<!-- 编辑型号表单 -->
<form>
<div class="mb-3">
<label for="editModelName" class="form-label">型号名称</label>
<input type="text" class="form-control" id="editModelName">
</div>
<div class="mb-3">
<label for="editModelCode" class="form-label">型号代号</label>
<input type="text" class="form-control" id="editModelCode">
</div>
<div class="mb-3">
<label for="editModelCategory" class="form-label">型号分类</label>
<input type="text" class="form-control" id="editModelCategory">
</div>
<button type="submit" class="btn btn-primary">确认</button>
<button type="button" class="btn btn-secondary">取消</button>
</form>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="deleteModelHeading">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#deleteModelCollapse" aria-expanded="false" aria-controls="deleteModelCollapse">
删除型号
</button>
</h2>
<div id="deleteModelCollapse" class="accordion-collapse collapse" aria-labelledby="deleteModelHeading"
data-bs-parent="#optionsAccordion">
<div class="accordion-body">
<!-- 删除型号表单 -->
<form>
<div class="mb-3">
<label for="deleteModelId" class="form-label">型号ID</label>
<input type="text" class="form-control" id="deleteModelId">
</div>
<button type="submit" class="btn btn-primary">确认</button>
<button type="button" class="btn btn-secondary">取消</button>
</form>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="setPermissionsHeading">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#setPermissionsCollapse" aria-expanded="false" aria-controls="setPermissionsCollapse">
设定权限
</button>
</h2>
<div id="setPermissionsCollapse" class="accordion-collapse collapse" aria-labelledby="setPermissionsHeading"
data-bs-parent="#optionsAccordion">
<div class="accordion-body">
<!-- 权限设定表格 -->
<table class="table">
<thead>
<tr>
<th>用户名</th>
<th>权限等级</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>用户1</td>
<td>管理员</td>
<td>
<select class="form-select">
<option value="admin">管理员</option>
<option value="user">普通用户</option>
</select>
</td>
</tr>
<tr>
<td>用户2</td>
<td>普通用户</td>
<td>
<select class="form-select">
<option value="admin">管理员</option>
<option value="user">普通用户</option>
</select>
</td>
</tr>
</tbody>
</table>
<button type="submit" class="btn btn-primary">保存更改</button>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="modelFlightAssociationHeading">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#modelFlightAssociationCollapse" aria-expanded="false"
aria-controls="modelFlightAssociationCollapse">
型号-试飞关联
</button>
</h2>
<div id="modelFlightAssociationCollapse" class="accordion-collapse collapse"
aria-labelledby="modelFlightAssociationHeading" data-bs-parent="#optionsAccordion">
<div class="accordion-body">
<!-- 型号-试飞关联表格 -->
<table class="table">
<thead>
<tr>
<th>型号名称</th>
<th>试飞名称</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>型号1</td>
<td>试飞1</td>
<td>
<button type="button" class="btn btn-danger">删除</button>
</td>
</tr>
<tr>
<td>型号2</td>
<td>试飞2</td>
<td>
<button type="button" class="btn btn-danger">删除</button>
</td>
</tr>
</tbody>
</table>
<form>
<div class="mb-3">
<label for="modelFlightName" class="form-label">型号名称</label>
<input type="text" class="form-control" id="modelFlightName">
</div>
<div class="mb-3">
<label for="modelFlightAssociation" class="form-label">试飞名称</label>
<input type="text" class="form-control" id="modelFlightAssociation">
</div>
<button type="submit" class="btn btn-primary">添加关联</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.1/js/bootstrap.bundle.min.js"></script>
</body>
</html>
这个代码示例中包含了主界面的所有可点击选项，并使用了Bootstrap的折叠组件来实现展开和折叠效果。每个选项都包含了相应的表单或表格，以及确认和取消按钮。你可以根据需要进一步自定义和美化界面。记得在浏览器中打开该HTML文件以查看实际效果。
原文地址: https://www.cveoy.top/t/topic/phLd 著作权归作者所有。请勿转载和采集!