7.1 开发工作流

7.1 开发工作流

一个 Bootstrap 页面从设计稿到上线，稳定的工作流是五步：断点分析 → 结构断案 → 组件填充 → 工具类微调 → 多端验收。每步有明确产出与验收动作，顺序错了返工翻倍。本节把五步拆成可执行的节拍，并立协作约定。

位置：实战章第一案。它定义 7.2 大案例要走的节拍——先立规矩，再打大案。

第一步：断点分析——数一数稿上有几套布局

拿到设计稿（通常是桌面、平板、手机三张），先做减法：三张稿里布局真正变化的次数决定要写几套判决。常见结论：三张稿其实是两套布局（手机竖排、md 起横排），中间那张只是间距缩水。

<!-- 分析产出物：一张「断点行为表」，写在注释或任务卡里 -->
<!--
  区块：功能卡组
  xs：1 列竖排，卡片内文字居中
  md：2 列，文字居左
  lg：3 列，第 4 张卡为「查看全部」占位
  隐患：设计稿 lg 是 3 列但 xl 仍是 3 列只是加宽——列数只需两档判决
-->
​

这一步的验收动作：对着表把每个区块的「换挡点」念出来。念不出的区块，说明稿子没画全，先去问设计，别凭感觉补——补错方向的返工是最贵的一种。

第二步：结构断案——先骨架后血肉

<!-- 只写骨架：容器、行、列、方向，不带任何视觉类 -->
<div class="container">
  <header class="row">
    <div class="col-12">页头：手机整行</div>
  </header>
  <main class="row g-4">
    <div class="col-12 col-lg-3">侧栏</div>
    <div class="col-12 col-lg-9">
      <div class="row row-cols-1 row-cols-md-2 g-3">
        <div class="col">功能卡</div>
        <div class="col">功能卡</div>
      </div>
    </div>
  </main>
</div>
<!-- 验收动作：拖动窗口，六断点下骨架换挡与断点行为表一致，再进入下一步 -->
​

骨架期的纪律：不写任何颜色、间距、字体类。骨架不对，血肉白搭；而骨架验证的成本极低（浏览器里拖窗口十秒）。

第三步与第四步：组件填充与工具微调

组件填充按「先官方后自制」：导航、卡组、表单、弹窗在 3 章组件库里有现成的，先放官方件；确无对应件再做自定义（判给 5.4 的四级阶梯）。工具微调是 4 章的主场，按 4.1 的「同位双刻度」补间距、按 4.2 的语义色上色、按 4.3 调字号字重。

<!-- 微调期的产出示例：官方卡片加三层微调 -->
<div class="col">
  <div class="card h-100 shadow-sm border-0 rounded-4">
    <div class="card-body p-4">
      <i class="bi bi-grid-3x3-gap fs-2 text-primary" aria-hidden="true"></i>
      <h5 class="card-title fw-semibold mt-2">栅格体检</h5>
      <p class="card-text text-body-secondary">十二列预算表的现场演练。</p>
    </div>
  </div>
</div>
<!-- 微调顺序：间距（p-4）→ 外观（shadow-sm border-0）→ 排版（fw-semibold），
     每加一类刷新一次看效果，别攒十类一起看——出问题无法归因 -->
​

第五步：多端验收——六断点逐档过堂

验收不是「手机上看一眼」，是有清单的过堂：

<!-- 验收辅助：横滚侦探——把这段常驻开发环境，出横向滚动立刻标红 -->
<div class="position-fixed top-0 start-0 p-1 bg-danger text-white d-none"
     id="scrollSpy" style="z-index: 2000">横向溢出</div>
<script>
  const spy = document.getElementById('scrollSpy');
  const check = () => spy.classList.toggle('d-none',
    document.documentElement.scrollWidth <= window.innerWidth);
  window.addEventListener('resize', check); check();
</script>
​

协作约定：让流程在团队里跑起来

三条约定值得写进项目规范：类名注释制——复杂区块的断点行为表以注释形式留在代码里（第一步的产出物跟着代码走）；评审看断点——代码评审必须包含拖动窗口的环节，静态截图不算数；定制走 5.4 判级——任何超出工具类的定制先判级再动手，四级改造必须过设计与技术双方评审。

⚠️ 常见坑：跳过第一步直接照桌面稿开写，手机版最后「挤出来」——这是返工率最高的路径。桌面稿信息量最大但判决顺序应该从最窄断点开始（移动优先的真义，7.4 详述），骨架先让 xs 成立，再逐档放宽。

快慢两档：演示页与生产页的不同跑法

五步节拍是生产档，不是唯一档。做演示页或原型验证时可以压成三步：断点分析（脑内过一遍即可）、骨架与组件合并写、验收只查目标档位——因为演示页的生命周期只有一次汇报，返工成本低，节拍的严谨度可以换速度。但有一条不许压：骨架先于视觉。演示页最常见的翻车是当场拖窗口给客户看，结果 xs 出横向滚动——骨架期十秒能查出的问题，拖到现场就是事故。

反过来，生产页还有第六步：把验收清单沉淀成项目自查文档。每过一次堂，把新发现的坑（如某档触控目标偏小）补进清单，项目越往后验收越快。这套节拍在本册的适用边界也顺带交底：它假设你用 Bootstrap 这类「类名即条文」的框架；换成组件props驱动的框架，五步依然成立，只是「断点行为表」的载体从类名注释变成组件配置。

结案要点

• 五步节拍：断点分析（出行为表）→ 骨架（无视觉类）→ 组件（先官方）→ 微调（一层一验）→ 六断点过堂；
• 骨架期不写视觉类、微调期一类一刷，都是为了可归因；
• 验收有清单，sm 档是被设计稿遗忘但事故最多的一档；
• 横滚侦探小工具常驻开发环境，横向溢出当场抓获；
• 团队三约定：注释带行为表、评审看断点、定制先判级。

流程已立，下一节用它打完整的大案。