Bootstrap虽无专用成绩录入组件，但可用表单控件、网格布局和验证样式快速构建响应式界面；需合理划分row/col区块、使用form-control类、type="number"+min/max限制分数、动态增删行时避免重复id、提交前调用checkValidity()触发校验，并务必在后端重做所有校验。
Bootstrap 本身不提供“考试成绩录入”专用组件，但用它的表单控件、网格和验证样式，能快速搭出结构清晰、响应式、带基础校验的录入界面。关键不是套模板，而是理清字段逻辑、控制输入约束、防止误填。
用 form-control 和 col 类对齐学号、姓名、科目、分数字段
别直接堆 input 标签——先用 row + col 划分视觉区块，让“学号+姓名”横向并排，“科目+分数”也对齐，避免移动端错位。
常见错误是把所有输入框写成等宽 col-12，结果在平板上浪费空间、在手机上挤成一团。实际建议：
- 学号、姓名用
col-md-6（中屏并排，小屏堆叠） - 科目下拉选单用
col-md-4，分数输入框用col-md-3，剩余留空或加“添加科目”按钮 - 每个
input必须加class="form-control"，否则无边框、无圆角、焦点状态失效
示例片段：
<div class="row">
<div class="col-md-6">
<label class="form-label">学号</label>
<input type="text" class="form-control" name="student_id" required>
</div>
<div class="col-md-6">
<label class="form-label">姓名</label>
<input type="text" class="form-control" name="name" required>
</div>
</div>
用 type="number" + min/max 限制分数输入范围
分数不是任意数字：0–100 是常见要求，但直接靠 JS 校验容易绕过；type="number" 能触发浏览器原生数值键盘（移动端友好），再配合 min="0" 和 max="100" 才真正卡住非法值。
注意两个坑：
-
type="number"的值是字符串，提交前需转Number()或后端强转，否则可能存成"85.5"字符串而非浮点数 - Chrome 允许输入
e或+符号，虽不提交但影响体验；可加oninput="this.value = this.value.replace(/[^0-9.]/g, '')"进一步过滤（仅作辅助，不可替代服务端校验） - 若支持小数（如 85.5 分），记得设
step="0.5"或step="any"，否则默认只接受整数
动态增删科目行时，避免重复 id 和失去 Bootstrap 样式
一个学生可能考语文、数学、英语三科，也可能考五科——用 JS 动态插入行时，不能复制带固定 id="score-input" 的 HTML 片段，否则多个同名 id 会破坏 label for 关联和部分插件逻辑。
正确做法：
- 所有动态生成的
input去掉id，改用name="scores[0].subject"这类数组式命名，方便后端解析 - 确保新插入的
input仍带form-control类，否则样式丢失 - 删除按钮建议用
btn btn-outline-danger btn-sm，比纯文字更易识别 - 首次加载至少保留一行，避免用户点“添加”前无处填写
提交前用 checkValidity() 触发 Bootstrap 的 is-invalid 状态
Bootstrap 的红色边框、错误提示不是自动出现的——必须调用原生表单的 checkValidity()，它才会给无效字段加 is-invalid 类，并显示 .invalid-feedback。
典型错误是只绑 submit 事件却不调用校验，导致用户点了提交却没反馈。正确流程：
- 监听表单
submit事件 - 调用
event.preventDefault()阻止默认提交 - 调用
form.checkValidity()，它返回false时，Bootstrap 自动标红并显示invalid-feedback - 仅当
checkValidity() === true时，才用fetch或submit()发送数据
这步漏掉，整个表单验证就形同虚设。
最易被忽略的是后端必须重做分数范围、非空、学号唯一性校验——前端样式和 JS 只是体验层，删掉 script 标签照样能发请求。别让 Bootstrap 的“看起来很规范”掩盖了服务端防护的缺失。
