Bootstrap仅提供表单样式与基础交互，需用其form类（如row、col-md-6、form-control）构建响应式结构，配合JavaScript实现动态行增删、实时校验等业务逻辑。
Bootstrap 本身不提供“资产领用表单”这种业务功能，它只负责样式和基础交互。你要做的，是用 Bootstrap 的表单组件（form、input、select、button 等）搭出结构清晰、响应式、可读性强的 HTML 表单，再配合少量 JavaScript 处理动态逻辑（比如添加领用人、校验日期）。关键不是“用 Bootstrap 做表单”，而是“用 Bootstrap 让表单不难看、不崩 layout、在手机上也能填”。
用 Bootstrap 5 的 form 类快速构建基础结构
别从零写 CSS，直接套 Bootstrap 5 的语义化类。重点用：class="row" 控制栅格对齐，class="col-md-6" 分栏避免字段挤成一列，class="form-label" 和 class="form-control" 保证字体、间距、焦点状态统一。所有 input 必须有 id 和对应的 label for，否则屏幕阅读器和移动端点击标签聚焦会失效。
常见错误：把多个字段塞进一个 div class="mb-3" 里却不分 row/col，结果在小屏上字段堆叠错乱；或者用 placeholder 当标签，导致无障碍支持差、用户离开焦点就忘了字段用途。
- 资产名称用
<input type="text" class="form-control" id="assetName" required> - 领用人下拉选人，用
<select class="form-select" id="userSelect"></select>，别用自定义 JS 插件覆盖原生select，除非真需要搜索过滤 - 领用日期必须用
<input type="date" class="form-control" id="issueDate">，浏览器原生控件兼容性好，且能触发移动端日期键盘
处理动态行：添加多个领用资产项
实际业务中常要一次领多件资产（比如一台电脑 + 一个鼠标 + 一条网线），不能只靠静态 HTML。得用 JavaScript 动态插入新行，并确保每行的 name 或 data- 属性可区分。Bootstrap 不管这个逻辑，但它的栅格类（row/col）能让你加十行也不乱版。
性能注意点：别每次点击“添加”就 innerHTML += ...，容易 XSS 且重绘开销大；改用 document.createElement + appendChild，或模板字符串配合 insertAdjacentHTML('beforeend', html)。
- 每行用独立
div class="row g-2 mb-2"包裹，g-2控制列间距，mb-2控制行间距 - 每个资产输入框加唯一后缀，如
name="assets[0][name]"、name="assets[1][name]"，方便后端解析 - 删除按钮用
<button type="button" class="btn btn-outline-danger btn-sm">删</button>，加type="button"防止意外提交表单
表单验证：别只靠 required，用 Bootstrap 的校验状态类
原生 required 只校前端空值，且提示丑、不可控。Bootstrap 5 提供 is-invalid 和 is-valid 类，配合 <div class="invalid-feedback"> 显示具体错误，比浏览器默认气泡友好得多。
<p>容易踩的坑：忘记调用 <code>checkValidity() 或手动添加 is-invalid 类；或者把校验逻辑全压在 submit 事件里，导致用户输错后没反馈，直到点提交才弹一堆红字。
- 监听
input或blur事件做实时校验，比如领用日期不能早于今天：if (new Date(issueDate.value) - 校验失败时，用
el.nextElementSibling找到紧邻的<div class="invalid-feedback"> 并设 <code>textContent - 提交前用
form.checkValidity()统一判断，返回false则event.preventDefault()
真正难的从来不是怎么让表单“看起来像 Bootstrap”，而是字段语义是否准确、校验时机是否合理、动态行数据能否被后端无歧义接收。样式只是最后一层薄纱，刮破了，底下逻辑扛不住才是真问题。
