Bootstrap本身不提供甘特图组件，纯CSS+HTML模拟仅支持极简静态展示，缺乏时间轴对齐、拖拽、依赖连线等核心功能，维护难、粒度粗；bootstrap-table模拟仅适用于只读且任务数少的场景。
Bootstrap 本身不提供甘特图（Gantt chart）组件，直接用它的栅格、卡片或进度条拼出来的不是真甘特图——它缺时间轴对齐、任务横条拖拽、依赖关系连线、滚动缩放等核心能力。想靠纯 Bootstrap CSS + HTML 模拟一个“看起来像”的甘特图，只能应付极简静态展示，且维护成本高、时间粒度难控制。
用 bootstrap-table + 时间列模拟简易甘特外观
适合只读、任务数少（
- 把每行当一个任务，用
bootstrap-table渲染表格，列设为：任务名、开始日、结束日、状态 - 在“时间轴”列里用
<div class="progress"> 手动算宽度：<code>width: calc((end - start) / totalDays * 100%)，起点用margin-left推过去 - 注意：日期得转成毫秒差再算比例，别用字符串比对；
new Date()构造时用'2024-06-01'格式，避免 Safari 解析失败 - 缺点明显：无法响应式缩放时间粒度（天/周/月切换），跨月任务会被截断，鼠标悬停看不出具体起止时间
- 引入
frappe-gantt的 CSS/JS 后，用<div id="gantt"></div>作容器，它会自动渲染 SVG 横条+时间轴 - 用 Bootstrap 的
col-lg-10包住#gantt，右侧放card放筛选控件，顶部用navbar做导出/刷新按钮 - 关键适配点：默认
frappe-gantt时间轴文字小、颜色浅，加自定义 CSS 覆盖.grid-header .header-year和.grid-row .bar-label，字体大小和颜色用 Bootstrap 的$body-color和$font-size-sm变量保持一致 - 别调
view_mode为"Quarter"—— 它在 v2.0.0 版本有渲染 bug，卡在空白，改用"Month"或"Week" - 任务拖拽默认只改时间，不自动更新工期（duration），需手动监听
eventDrop并重算end字段 - 没内置里程碑（milestone）标记，要自己用
eventContent插入<div class="fc-milestone"></div>再写 CSS - 依赖关系（FS/SS）完全不支持，得额外画 SVG 线，和 FullCalendar 的 DOM 更新机制容易冲突
- 如果你后台已有任务依赖数据，硬套 FullCalendar 反而增加同步复杂度
集成 frappe-gantt 并用 Bootstrap 控制容器样式
这是更实际的选择：用轻量、MIT 协议的 frappe-gantt 渲染真实甘特逻辑，Bootstrap 只管外层布局和按钮样式。
为什么不用 fullcalendar 的 timeline view？
虽然 fullcalendar@6+ 的 timelineDay/timelineWeek 视图视觉接近甘特图，但它本质是日程调度器，不是项目管理工具。
真正卡住进度的往往不是“怎么画横条”，而是时间单位统一（后端返回的是 UTC 时间戳还是本地日期字符串？）、任务层级嵌套（阶段→子任务→工时项）、以及缩放后文字是否可读。这些细节在纯 Bootstrap 方案里会反复返工，而用专有甘特库时，得花时间读它的 on_click 和 on_view_change 回调文档——别跳过示例里的 date_format 配置，中国项目多数需要 "YYYY-MM-DD" 而非默认的美式格式。
