框架

手写响应式布局，需要反复处理栅格、断点、浏览器差异等“体力活”。响应式框架把这些沉淀为现成的 CSS 类，写 HTML 时引用 class 就能得到成品效果。本节介绍框架解决什么问题、常见框架怎么选，并给出最小上手示例。

框架解决了什么

• 统一栅格：一行类名切出任意比例栏位，断点内置。
• 现成组件：按钮、导航、卡片、表单开箱即用，自带响应式。
• 抹平差异：内置 Normalize 重置样式，各浏览器观感一致。
• 生态丰富：深色模式、图标、扩展组件、主题定制一应俱全。

代价是引入体积与学习成本，因此衍生出“按需引入”与原子化 CSS（如 Tailwind）等路线。

常见框架对比

框架	特点	适用人群
Bootstrap	老牌成熟、组件最全、文档丰富	追求快速上线的全栈与新手
Foundation	企业级、语义化与可访问性好	重视定制与规范的团队
W3.CSS	体积极小、零依赖、极易上手	学习演示与轻量页面
Tailwind CSS	原子类，样式直接写在 HTML 上	以定制设计为主的前端团队

最小上手：Bootstrap 栅格

引入 Bootstrap 的 CSS 后，用 row 与 col-- 组合布局：

<link rel="stylesheet"
      href="https://example.com/bootstrap@5.3/dist/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-md-8">主内容</div>
    <div class="col-md-4">侧栏</div>
  </div>
</div>

说明：col-md-8 与 col-md-4 表示屏幕达到 md 档（≥768px）时按 8:4 分栏，小于该宽度则自动堆叠为整行。内置 12 列栅格与断点，把前面几节手写的栅格与媒体查询工作都封装好了。

如何选择与使用

• 后台管理、原型验证、快速上线：直接选 Bootstrap，查文档用类名即可。
• 页面视觉要求独特、以前端开发为主：可考虑 Tailwind 的原子类方案。
• 只需一两个组件：尽量按需引入或抄写其栅格 CSS，避免整套框架拖慢首屏。
• 无论选哪个，先理解栅格与断点原理（见“网格视图”“媒体查询”两节），用框架才不会“只会抄、不会改”。

小结

框架把栅格、组件、断点封装成类，让响应式开发从“写代码”变成“选 class”，显著提速。但框架是手段不是目的——原理在手，Bootstrap、Tailwind 都只是不同口味的工具，需要时随时可换。