Bootstrap仅提供UI组件，无法实现图书借阅业务逻辑，需对接Node.js/Flask等后端处理借阅、归还及权限；前端用其快速搭建响应式管理界面，含搜索框、表格、模态框，并注意无障碍支持与错误响应协同。
Bootstrap 本身不提供图书借阅逻辑，它只是前端 UI 框架。你要做的不是“用 Bootstrap 制作后台”，而是用 Bootstrap 快速搭建一个**看起来专业、响应式、易维护的管理界面**，再对接真实后端（比如 Node.js、Python/Flask 或 PHP）处理借阅、归还、用户权限等业务。
下面直奔实操重点：
怎么快速搭出带搜索+表格+模态框的借阅列表页
图书馆后台最常访问的是“当前借阅中”列表，你需要：可搜索的输入框、带分页的图书+读者信息表格、点击“归还”弹出确认模态框。
直接复用 Bootstrap 5 的组件组合即可，不用写 CSS：
- 搜索框用
<input type="search">+form-control类 - 表格套
table table-hover table-striped，加thead-light让表头更清晰 - 操作列放按钮，归还用
btn btn-sm btn-outline-danger，绑定data-bs-toggle="modal"触发Modal - 模态框里别写死 ID，用
data-book-id和data-borrow-id把关键数据传进去，JS 里取：event.relatedTarget.getAttribute('data-borrow-id')
注意：别在模态框里直接写 DELETE /api/borrow/123，先用 JS 拿到 ID，再 fetch() 发请求 —— 否则一个页面多个归还按钮会全部指向同一个 ID。
为什么不能只靠 Bootstrap 实现“借书”功能
Bootstrap 没有验证读者证号是否有效、没查图书库存余量、不校验借阅规则（比如每人最多借 5 本）。这些必须由后端完成。
前端能做的只是把表单交出去，并处理返回结果：
- 提交前用
required和pattern做基础校验（如证号格式^[A-Z]{2}\d{6}$） - 提交后禁用按钮，防止重复点击：
button.disabled = true - 后端返回
{ success: false, message: "该读者已借满5本" }，就用Toast组件展示提示 - 成功后清空表单并刷新表格（或局部更新），别用
location.reload()—— 用户正在填另一本书时会被打断
怎么让“读者信息弹窗”支持键盘操作和屏幕阅读器
图书馆可能有视障馆员，或者你被要求做无障碍（WCAG）。Bootstrap Modal 默认支持 ESC 关闭、Tab 键循环聚焦，但容易漏掉两点：
- 打开弹窗后，焦点没自动进到第一个可交互元素（比如关闭按钮），需手动
modalEl.querySelector('button[data-bs-dismiss]').focus() - 弹窗缺少
aria-labelledby和aria-modal="true"，要补上：<div class="modal" aria-labelledby="readerModalLabel" aria-modal="true"> <li>如果弹窗里显示身份证号、手机号，记得用 <code>aria-label="读者手机号：隐藏后四位"避免读屏软件全读出来 - 后端接口返回
{ data: [...], pagination: { total: 127, page: 1, per_page: 10 } } - 前端用
map()渲染<tr>，状态字段用条件 class：<code>class="badge ${item.overdue ? 'bg-danger' : item.due_soon ? 'bg-warning' : 'bg-success'}" - 分页按钮用
btn btn-outline-secondary，当前页加active类，点击后更新 URL 参数（如?page=3）并重新 fetch
不加这些，测试工具（如 axe DevTools）会报 ARIA dialog must have an accessible name 错误。
用 Bootstrap Table 还是自己写表格 + 分页
别引入 bootstrap-table 插件。它封装过深，调试借阅状态颜色（比如“逾期”标红、“即将到期”标橙）反而更麻烦。
推荐手写表格 + 简单分页逻辑：
复杂筛选（按日期范围、借阅状态多选）建议用 Form 包裹 + submit 触发，比 JS 手动拼 query string 更可靠、可 bookmark、支持浏览器后退。
400 Bad Request 里没带具体字段错误（比如“borrow_date 不能晚于 today”），导致前端不知道该高亮哪个输入框。前后端早点对齐错误响应格式，比挑哪个 Bootstrap 主题更重要。
