同一套 UI，三种写法：Bootstrap / Bulma / Tailwind 三框架横评

三份可直接双击打开的案例页、一个同屏对比页、一批本机实测数据——聊聊三种 CSS 框架的设计哲学、样式能力、交互成本和选型边界。

Bootstrap / Bulma / Tailwind

一、这篇文章从哪来

手上有三份"讲同一件事"的页面：它们都演示布局、排版、表单、组件、工具类、暗黑模式这几块内容，但分别用 Bootstrap、Bulma、Tailwind CSS 实现。既然内容对等，就正好可以当成一次控制变量的横评。

为了对比方便，我又做了两件事：

• 把三份页面塞进同一个 index.html：三栏 iframe 并排/堆叠、可缩放、可按章节跳转、可同步滚动，样式互不污染；
• 把结论写成这篇文章，并附上可复现的测量方法（见文末）。

文件清单如下。

三份页面结构上刻意对齐，覆盖的模块数量如下：

最后一行已经剧透了三个框架的性格：Bootstrap 用别人的 JS，Bulma 用别人的 CSS，Tailwind 什么都不给你但什么都能写。

二、三种设计哲学：你买到的"交付物"不一样

Bootstrap：把组件当一等公民。 它交付的是一套完整的 UI 套件——按钮、卡片、模态框、下拉、轮播、Toast、Offcanvas、Tooltip……每个组件既有样式也有行为，行为由官方 JS 插件驱动。你用 data-bs-toggle 写声明，剩下的（焦点陷阱、ESC 关闭、滚动锁、ARIA 状态同步）框架全包。

Bulma：把语义化类名当一等公民。 它只交付 CSS，一个字节 JS 都没有。类名高度可读（button is-primary is-outlined、has-text-danger、is-size-3），v1 之后全面变量化（--bulma-*），顺带内置了暗黑模式的变量切换和 is-skeleton 骨架屏。代价是：交互、图标、Toast 这类"行为"要你自己接。

Tailwind：把设计 token + 原子类当一等公民。 它交付的是一台编译器：你写 px-4 py-2 rounded-lg bg-sky-600，它按需生成对应的 CSS。没有"按钮"这个概念，只有零件。好处是产物最小、约束最统一；代价是模板变长、组件体系要自己长出来（或引入 shadcn/Headless UI 这类无样式组件库）。

三、同一个按钮，三种写法

<!-- Bootstrap：语义类组合，改颜色改尺寸都只是换类名 -->
<button type="button" class="btn btn-primary">主要按钮</button>
<button type="button" class="btn btn-outline-primary btn-sm">描边小按钮</button>
<button type="button" class="btn btn-primary" disabled>禁用</button>

<!-- Bulma：读起来最像英文句子 -->
<button class="button is-primary">主要按钮</button>
<button class="button is-outlined is-small">描边小按钮</button>
<button class="button is-primary" disabled>禁用</button>

<!-- Tailwind：一次写完所有细节，复用要靠组件化 -->
<button class="rounded-lg bg-sky-600 px-4 py-2 text-sm font-medium text-white
               transition hover:bg-sky-500 disabled:cursor-not-allowed disabled:opacity-50">
  主要按钮
</button>

三行代码背后是三种维护模型：Bootstrap 改一次 --bs-primary 全局生效；Bulma 改一次 --bulma-primary 全局生效；Tailwind 要靠设计 token 和组件封装，否则你会在一个项目里看到 7 种蓝色。

四、样式能力：栅格、间距、颜色、排版

一句话总结：Bootstrap 提供"够用的刻度"，Bulma 提供"好读的刻度"，Tailwind 提供"没有刻度的尺子"。 刻度少的好处是设计一致性天然更好；刻度自由的好处是不用为了 13px 的间距去写一个自定义类。

五、组件覆盖：这是最大的分水岭

我把三份页面里演示过的组件整理成 24 类，逐个核对：

统计结果：Bootstrap 24 类全部开箱即用；Bulma 16 类有现成样式（5 类要自己拼、3 类没有）；Tailwind 一类都没有。

这就是三个框架最本质的差别：Bootstrap 卖组件，Bulma 卖样式，Tailwind 卖零件。如果你的页面里塞满了模态框、下拉、轮播、Toast，选 Bootstrap 省下的工作量是以"天"计算的；如果页面基本是内容展示，Bulma 的语义化类名会让 HTML 好读很多。

六、交互：谁在替你写 JavaScript

有个很直观的对照：三份页面里都有"下拉菜单、标签页、模态框、导航栏汉堡菜单、主题切换"这五组交互。

• Bootstrap 版只写了 80 行 JS，其中大部分还是主题切换——因为交互全部由插件接管；
• Bulma 版和 Tailwind 版分别写了 183 行和 197 行，因为连 aria-expanded 和 is-active 的切换都得自己来。

判断法则：如果页面里超过 5 个交互组件，Bootstrap 的 79 KB JS 是划算的；如果只有一两个（比如一个移动端菜单），那 190 行自写 JS 换来的"零 JS 依赖"更干净。

七、暗黑模式：三条完全不同的路线

暗黑模式其实是判断一个框架"是否设计系统化"的试纸。Bootstrap 和 Bulma 的做法是"换一套变量"，你写业务样式时只要用变量，切换就是零成本；Tailwind 的做法是"每个元素写两遍"，控制力最强，但三份页面里它是唯一需要 314 处额外类名的那份——这不是 Tailwind 的缺陷，而是它的模型：它把主题决策的负担从框架转移到了你的模板和团队约定上。

八、体积：真实数字

以下数据在本机实测（方法见文末），原始体积按 CDN 上的 min 版本统计，gzip 为 level 9。

三点解读：

1. gzip 之后，Bootstrap 全家桶（66 KB）和 Bulma 单个 CSS（63.5 KB）几乎同级，但 Bootstrap 多送 24 类可交互组件。Bulma 的 662 KB 原始体积来自 v1 把 light/dark 两套配色变量全量吐出——网络成本能接受，但 CSS 解析不是免费的，移动端低端机要留意。
2. Tailwind 浏览器版是体验工具，不是生产方案：276 KB 的运行时要在浏览器里现场编译，首次渲染会闪一下，而且需要较新的浏览器（Chrome 111+ / Safari 16.4+）。生产环境应当走构建流程，只为用到的类生成 CSS——本案例页按需生成 53 KB，minify 后 42 KB（gzip 仅 7.8 KB），这才是 Tailwind 真正的体积形态：同样的页面，CSS 网络成本只有 Bootstrap 全家桶的约 1/8、Bulma 的约 1/8。
3. 三份案例页自身的 HTML 都在 60 KB 左右（1088 / 1306 / 873 行），因为大头是中文示例文案和表格内容，框架差异被内容淹没了——这也是个好提醒：框架体积焦虑要先看内容体积。

九、响应式与断点

写起来最顺手的是 Tailwind（任何工具类都能加断点前缀，不必是"栅格专属"）；最省心的是 Bootstrap（栅格类自带断点，不需要你记断点数值）；Bulma 的断点基于 min-width，从 tablet 才开始生效，写移动优先时需要适应一下它的心智模型。

十、可访问性：框架替你做了多少

• Bootstrap：插件会自动维护 aria-expanded、aria-selected、aria-controls，模态框有焦点陷阱、ESC 关闭、滚动锁，还有 visually-hidden、RTL 支持。这一栏它领先得最多。
• Bulma / Tailwind：框架只提供样式，ARIA 全凭自觉。不过我核对过三份案例页——Bulma 版补了 aria-expanded、aria-selected、aria-hidden 与 focus-visible 描边；Tailwind 版手写了 role="tablist"、role="dialog"、aria-modal、aria-live、role="switch" + aria-checked。也就是说两份都补齐了，差别在于"谁保证不漏"：Bootstrap 是框架保证，另两个是代码评审保证。

如果你在做面向公众、有合规要求的项目，把可访问性检查写进 CI（例如 axe-core），比选哪个框架更重要。

十一、工程化与长期维护

两个容易被忽略的点：

1. Bootstrap 的"约定"既是资产也是负债。它的类名体系让新人一天就能上手，但也让所有 Bootstrap 站点长得像亲戚；想彻底摆脱"Bootstrap 味"，你得改 SCSS 变量、重写圆角阴影，成本并不低。
2. Tailwind 的长期成本在约定，不在语法。它没有帮你做任何设计决策：色板要选、间距刻度要定、组件要封装（cva、clsx、@apply 或 React 组件）。没有这层约定，半年后的模板会变成一堵 class 墙。

十二、选型建议

三条经验法则：

• 交互组件数量决定 Bootstrap 的性价比——超过 5 个可交互组件，它几乎稳赢。
• 设计独特性要求决定 Tailwind 的价值——如果产品必须"不像任何模板"，Tailwind 的自由度就是刚需。
• 团队 CSS 水平与维护周期决定 Bulma 是否够用——页面简单、人手少，它最省心；要长期演进的组件体系，它容易碰到天花板。

也可以混着用：Tailwind 写页面 + Headless UI/Radix 管交互；Bootstrap 只定制 SCSS 变量当组件库；Bulma 配少量自写 JS 做轻量站点。框架不是阵营，是成本结构。

十三、结论

三份页面演示的是同一批 UI，但把它们并排放在一起时，差别不在"哪个更好看"，而在你把成本付给了谁：

• Bootstrap 让你把成本付给体积和"同质化"，换回组件与交互；
• Bulma 让你把成本付给自写 JS 和自建组件，换回干净可读的 HTML；
• Tailwind 让你把成本付给模板长度与团队约定，换回最小的产物和最大的设计自由。

如果今天要重做这套案例页：交互密集的管理后台我会选 Bootstrap；内容型站点选 Bulma；有设计系统、要长期演进的产品选 Tailwind。没有最好的框架，只有最合适的约束。

附：怎么复现

查看对比页

1. 双击 index.html：三栏 iframe 会自动加载三份案例页（首次需联网拉 CDN）。
2. 顶部工具栏可以切换「并排 / 堆叠」、勾选显示哪几个框架、缩放 50%~100%、切换本页暗黑模式。
3. 每列下方是章节跳转按钮、刷新按钮和"新窗口打开"。
4. 「同步滚动」需要同源环境：在 file:// 下浏览器禁止跨文档访问，页面会自动提示降级。用同目录的 启动本地服务.cmd 以 http://localhost:8931/ 打开即可启用同步滚动与章节即时跳转。

测量方法

1. 体积：用 Node 从 jsdelivr 拉取对应版本文件，统计原始字节与 gzip（level 9）字节。
2. Tailwind 生产形态：用 Edge 无头浏览器打开 tailwind-showcase.html，等浏览器端编译完成后提取注入的样式表，再用 lightningcss 压缩得到上面的数字。
3. 行数 / dark: 计数：脚本统计三份 HTML 的行数与正则匹配数量。

数据采集于 2026-10-16，版本为当日 CDN 最新稳定版：Bootstrap 5.3.8、Bulma 1.0.4、Tailwind CSS 4.3.3，三者均为 MIT 许可。