Bootstrap 的核心是 12 列栅格:一行 row 内用 col-md-6 这类类名自动分配宽度,配合内置媒体查询在手机、平板、桌面间无缝切换,没有任何 CSS 基础的人也能半天上手。它还自带按钮、导航栏、卡片、模态框、分页等几十种预制组件,引入一个 CSS 文件就能直接用,综合学习成本几乎是所有框架里最低的。
Bootstrap 5 是重要分水岭:彻底移除了 jQuery 依赖,所有插件用原生 ES6 重写,并把大量硬编码值改成 CSS 自定义属性,改主题色、圆角不再需要 Sass 重新编译。它的定位始终是快速搭建后台管理系统、企业官网、活动页这类重速度、轻个性的场景;面向 C 端消费者、追求独特视觉的项目用它则容易千篇一律。
<style> .row { display: flex; flex-wrap: wrap; gap: 12px; } .col { flex: 1; min-width: 200px; background: #eef5ff; border: 1px solid #4a9eff; border-radius: 6px; padding: 12px; } </style> <div class="row"> <div class="col">col 等宽列</div> <div class="col">col 等宽列</div> <div class="col">col 等宽列</div> </div>