前端技术演化史

Bootstrap

Properties1
tagsui组件, 设计系统, bootstrap, css框架, 栅格系统

10分钟阅读

🅱️ Bootstrap

一句话定性

Bootstrap 是 CSS 框架的鼻祖,它把”做出一个像样的页面”的门槛,从”懂设计 + 会写 CSS”降到了”会抄 class 名”。它用预置样式 + 栅格系统让整整一代非设计师快速产出整洁页面——代价是整个互联网有一阵子长得像同一个模子刻出来的,以及它那套”全局 CSS class”的世界观,在组件化浪潮里彻底落伍。

一、它是什么 & 出现的时代

2011 年 8 月,Twitter 的两位工程师 Mark Otto 和 Jacob Thornton 开源了 Bootstrap(最初叫 Twitter Blueprint,本是公司内部统一工具样式的项目)。它诞生在 2005-2013 Ajax时代 的尾声、jQuery 当道的年代。

它本质上是一套 CSS 框架:给你一堆预先写好的 CSS class,你往 HTML 上一套,就有了按钮、表单、导航条、卡片、栅格布局。

<!-- 不用写一行 CSS, 套上 class 就有样式 -->
<div class="container">
  <div class="row">
    <div class="col-md-6"><button class="btn btn-primary">提交</button></div>
    <div class="col-md-6"><button class="btn btn-default">取消</button></div>
  </div>
</div>

它给的是样式皮(skin),不是组件:行为(下拉展开、模态弹出)在那个年代是配套的 jQuery 插件干的活。这一点是理解它后来为何落伍的关键。

二、为什么会出现(解决上一代什么痛点)

jQuery 时代做页面的真实痛苦

在 Bootstrap 之前,做一个”看起来不丑”的页面要:① 自己设计配色、间距、字号(没有设计功底就翻车);② 手写所有 CSS;③ 自己解决浏览器兼容(IE 的盒模型、各种前缀);④ 自己从零搭响应式布局。对于后端工程师、个人开发者、初创团队,“做出一个不像 1998 年的页面”本身就是一道高墙。

Bootstrap 的洞察极其务实,也极符合奥卡姆剃刀:

绝大多数网站需要的 UI 是高度雷同的——按钮、表单、导航、栅格、卡片。那为什么每个人都要重新发明一遍?把这些标准件做好、做美、做兼容,打包成 class 名,谁都能用。

它一举铲平了几座大山:统一的视觉规范(不用懂设计)、12 栅格响应式系统(不用手搓布局)、跨浏览器兼容(它替你处理了 IE 的脏活)。

三、核心机制 & 为什么流行

  • 12 列栅格系统(Grid):.container / .row / .col-*,响应式布局从”高难度手艺”变成”填空题”。这是 Bootstrap 最被模仿的部分。
  • 预置组件样式:.btn、.form-control、.navbar、.alert、.modal……套 class 即用。
  • 配套 jQuery 插件:Modal、Dropdown、Carousel、Tooltip 的行为由 jQuery 插件提供——这暴露了它的时代基因:样式和行为是分离的两套东西。
  • Normalize + 兼容兜底:替你抹平浏览器差异,在 IE 还活着的年代是刚需。

它为什么火成了现象级

  1. 门槛塌方:非设计师、后端、个人站长,一下午就能产出整洁页面。这是它最大的历史功绩。
  2. GitHub 头号明星:Bootstrap 长期霸榜 GitHub star 第一,生态(主题市场、模板站)爆炸。
  3. 完美契合时代:jQuery 时代是”全局 DOM + 全局 CSS”的世界观,Bootstrap 的”全局 class”模型与之严丝合缝。
  4. 企业内后台救星:管理后台要的是”快、整齐、统一”,不要个性——Bootstrap 正中靶心。

四、带来的新问题 / 副作用

便利的另一面

  1. “一眼 Bootstrap 味”:默认主题太有辨识度,一段时间内大半个互联网长得一模一样——蓝色 btn-primary、圆角卡片、熟悉的栅格。降低门槛的代价是抹平个性。
  2. 定制是场苦战:想偏离默认风格,要么改 Less/Sass 变量重新编译,要么写一堆覆盖样式和 !important 跟它的高优先级选择器死磕。“用它容易,改它难”——这个矛盾会在下一代组件库里继续上演。
  3. 样式臃肿:为了”全都有”,你引入了一大坨自己根本用不到的 CSS,首屏负担重。
  4. 全局污染:全是全局 class 和全局样式,大型项目里命名冲突、样式互相打架(这正是后来 CSS-in-JS、CSS Modules、原子化CSS 要解决的问题)。
  5. 与组件化范式根本不契合(致命伤):见下节。

五、为什么会衰落 / 现状

Bootstrap 没有”死”,至今仍是后台模板、Rails/Django/Laravel 服务端渲染项目、快速原型的常客。但它退出了现代前端的主舞台,根因是一次范式断层:

致命伤:Bootstrap 的世界观与组件化冲突

2013-2018 SPA时代,React/Vue 把 UI 的基本单位从”全局 CSS class + DOM”变成了自带行为和状态的组件。Bootstrap 的模型——“全局 class 描述样式 + jQuery 插件提供行为”——和这套范式水土不服:

  • React/Vue 应用里没人想直接操作 DOM,而 Bootstrap 的 JS 插件正是基于 jQuery 直接操作 DOM 的;
  • 开发者要的是 <Button type="primary"> 这样的组件,而不是往 <button> 上拼 class="btn btn-primary";
  • 全局 CSS 与组件样式隔离的诉求(scoped、CSS Modules)天然矛盾。

于是新一代框架绑定的组件库接管了战场:它们不再只给样式皮,而是把样式 + 行为 + 状态 + a11y 全包进一个组件。详见 组件库时代-AntD-MUI-Element。

Bootstrap 自己也试图跟进:Bootstrap 5(2021)彻底移除 jQuery 依赖、转向原生 JS、拥抱 CSS 变量——但范式的列车已经开走,它更多是优雅地守住”服务端渲染 + 快速原型”的存量阵地。

六、对后续技术的影响(因果链)

jQuery 时代: 做个像样的页面 = 懂设计 + 手写 CSS + 抹平 IE 兼容 (高墙)
        │
        ↓
Bootstrap (2011, Twitter): 预置样式 class + 12 栅格 + jQuery 插件
        │  → 门槛塌方, 非设计师也能快速产出整洁页面 (历史功绩)
        │
        ├─► 副作用①: "一眼 Bootstrap 味" ──► 催生对"可定制 / Design System"的渴望
        │
        ├─► 副作用②: 定制要和 !important 死磕 ──► "用它容易改它难"的母题
        │            └─► 这个痛点会一路传到 AntD/MUI, 最终逼出 Headless
        │
        ├─► 副作用③: 全局 CSS 污染 ──► CSS Modules / [[CSS-in-JS]] / [[原子化CSS]]
        │
        └─► 致命伤: 全局 class + jQuery 的世界观 与 组件化范式冲突
                     │
                     ↓ SPA 时代到来 ([[React]]/[[Vue]])
            [[组件库时代-AntD-MUI-Element]]: 不再给"样式皮", 而是给"完整组件"

历史地位

Bootstrap 是”控制权钟摆”的起点:它把封装度拉到一个新高度(套 class 即用),用”放弃个性化”换来了”人人能做页面”。它证明了标准件的巨大价值,也第一次暴露了那个将贯穿整部组件库史的母题——“全包带来的便利”与”定制带来的痛苦”之间的永恒张力。后面每一代(AntD 的换肤难、Headless 的样式解耦、shadcn 的源码归你),都是在不同高度回应同一个问题。

🔗 本组:UI组件库演进史 | 组件库时代-AntD-MUI-Element | Headless-UI | shadcn-ui 🔗 时代:2005-2013 Ajax时代 | 2013-2018 SPA时代 🔗 相关:jQuery | React | Vue | 原子化CSS | CSS-in-JS | CSS演进史

关系图谱

反向链接