Bootstrap本身不提供HR薪酬管理功能，它只是前端UI框架；纯用其CSS和组件无法实现个税计算、权限控制、多薪周期处理、Excel导出及审批流对接等核心业务逻辑，必须结合Vue等框架与后端API协同开发。
别指望靠 bootstrap.min.css 和几个 card 组件就搭出能用的薪酬系统——那只是个空壳。
为什么纯 Bootstrap 写不了真正的薪酬后台
薪酬管理不是静态页面：要算个税、校验社保比例、处理多发薪周期（月薪/日结/项目制）、导出 Excel、对接钉钉或企业微信审批流……这些都超出 CSS 框架的能力边界。
-
bootstrap-table可以渲染表格，但不会自动帮你按tax_rate字段重算应发工资 -
form-control能画输入框，但不验证“基本工资 + 绩效 ≥ 当地最低工资标准” - 所有
data-toggle="modal"弹窗里的数据，得你手动用fetch或axios从后端拉，还要处理 token 过期、403 权限拒绝
实际可行的组合路径（推荐 Vue + Bootstrap Icons + 后端 API）
把 Bootstrap 当“皮肤”，重点补足它缺的三块：
- 用
vue-router管理菜单权限（比如财务岗看不到员工银行卡号字段） - 用
element-plus或bootstrap-vue的b-form-datepicker处理薪资周期选择，避免手写日期范围校验 - 后端必须提供明确接口：如
POST /api/v1/salary/calculate接收{ employee_id, month: "2024-09" }，返回含个税、五险一金明细的 JSON
示例片段（Vue 单文件组件中调用）：
const calculateSalary = async () => {
const res = await fetch('/api/v1/salary/calculate', {
method: 'POST',
headers: { 'Authorization': `Bearer ${token}` },
body: JSON.stringify({ employee_id: 123, month: '2024-09' })
});
const data = await res.json();
// 渲染到 bootstrap card-body 里
};
最容易被忽略的兼容性坑
HR 系统常被老员工用 IE11 或旧版 Edge 打开，而 Bootstrap 5 已放弃 IE 支持：
- 若必须兼容 IE，退回
bootstrap@4.6.2，且禁用所有flex布局类（改用float-left+clearfix） -
bootstrap-icons的 SVG 图标在 IE 中需额外加<svg><use xlink:href="..."></use></svg>，不能只靠<i class="bi bi-calculator"></i> - 薪酬页面的金额输入框，务必用
inputmode="decimal"+pattern="[0-9]*\.?[0-9]{0,2}"，否则 iOS 键盘弹不出小数点
真正卡住进度的从来不是怎么让表格居中，而是个税公式要不要按国税总局 2023 年 12 号公告更新，或者公积金基数上限是否已从 35000 调整为 38000 —— 这些和 container-fluid 没半点关系。
