Bulma基于纯Flexbox构建且无JavaScript依赖，采用语义化类名、零预设主题、专注布局表达力；Bootstrap则保留历史网格结构、提供丰富交互组件并依赖JS插件。
一、Bulma基于纯Flexbox构建，无JavaScript依赖
Bulma从底层完全采用CSS Flexbox实现布局逻辑，所有栅格、对齐、间距控制均通过现代CSS属性完成，不引入任何运行时脚本。这种设计避免了DOM操作开销与兼容性补丁，使样式渲染更直接、可预测。
1、查看Bulma官方源码，确认其核心布局类（如.is-flex、.is-justify-content-center）全部映射至原生CSS flex属性。
2、在浏览器开发者工具中禁用JavaScript后，Bulma页面的结构排列、响应式断点切换仍完全正常。
3、对比Bootstrap 5，其部分组件（如Dropdown、Toast、Offcanvas）仍需依赖内置JavaScript模块触发交互行为。
二、Bulma采用语义化类名体系，降低认知负荷
Bulma使用.button、.card、.navbar等贴近HTML语义的类名，开发者无需记忆抽象前缀或嵌套规则，代码意图一目了然。这种命名方式与现代Web标准演进方向一致，也更契合HTML5语义化实践。
1、编写一个按钮时，直接使用<button class="button">提交</button>，无需像Bootstrap那样区分.btn、.btn-primary、.btn-lg等多重修饰层级。
2、构建卡片组件仅需组合.card、.card-content、.card-footer三类基础类，而Bootstrap需嵌套.div.card > .div.card-body > .h5.card-title等多层结构。
3、Bulma不强制容器（container）、行（row）、列（col）三层嵌套模型，允许元素在flex上下文中自由流动。
三、Bootstrap保留向后兼容结构，存在历史包袱
Bootstrap为维持数百万存量项目稳定，延续了自v3以来的网格系统范式：固定.container宽度、.row负边距抵消、.col-*列宽百分比计算。该模型虽成熟，但与Flexbox原生流式布局理念存在张力。
1、Bootstrap的.col-12在移动端默认占满，但需显式声明.sm、.md等断点类才能响应变化；Bulma则通过.is-flex-touch、is-flex-desktop等布尔类实现更简洁的设备态切换。
2、Bootstrap 5虽移除jQuery依赖，但其JavaScript插件仍绑定data-bs-*属性并依赖内部事件总线，而Bulma全量零JS介入。
3、Bootstrap的Sass变量体系包含大量遗留命名（如$enable-rounded、$enable-shadows），而Bulma变量全部以$bulma-开头且聚焦于布局与间距原子值。
四、Bulma默认无预设主题风格，强化设计自主权
Bulma不提供全局主题色、圆角等级、阴影深度等视觉基调设定，所有外观均由开发者通过Sass变量或实用类主动声明。这种“空白画布”策略更适配当代品牌定制化需求。
1、修改主色调只需重设$bulma-primary变量并重新编译，无需覆盖数十个.btn-primary、.alert-primary等选择器。
2、取消所有圆角效果仅需将$bulma-radius设为0，而Bootstrap需分别设置$border-radius、$border-radius-sm、$border-radius-lg等多个变量。
3、Bulma未内置图标字体或SVG图标集，避免引入非必要资源和潜在安全风险。
五、Bootstrap生态更重功能覆盖，Bulma专注布局表达力
Bootstrap提供模态框、轮播图、工具提示等15+交互组件的完整实现，适合快速交付业务型应用；Bulma仅提供静态结构组件（如Modal HTML结构），交互逻辑交由开发者自行绑定，从而保持CSS层纯粹性。
1、在Bulma中实现下拉菜单，需手动添加JavaScript监听click事件并切换.is-active类；Bootstrap中仅需data-bs-toggle="dropdown"属性即可激活。
2、Bulma的.pagination组件仅定义分页数字布局，不包含上一页/下一页箭头的自动禁用逻辑；Bootstrap pagination自动根据当前页态更新aria-disabled与指针样式。
3、Bulma的文档明确标注“Components are static”，所有动态行为需外部控制；Bootstrap文档中“JavaScript behavior”为每个组件独立章节。
