Bootstrap

定义

Bootstrap是一套面向网站与网络应用界面的开源前端框架，内容涵盖HTML结构约定、CSS样式表与JavaScript插件三部分，目标是把常见的界面元素做成可以直接套用的类名与组件^[1]。它的产物既包括编译好的CSS与JS文件，也包括用Sass写成的源文件，开发者既能直接引用成品，也能修改变量后重新编译^[3][4]。

官方文档把自身定位为前端工具集，可从原型阶段一直用到正式产品，最简用法是在页面中引入一份CSS文件和一份JS包，无需构建步骤^[5]。部分交互组件，例如下拉菜单、弹出提示与气泡提示，还需要额外的定位库Popper参与计算位置^[5]。项目以MIT许可证发布，源码托管在GitHub上，任何人都可以参与贡献^[1]。

原理

框架的布局基础是十二列网格。页面上先放一个容器，容器内放行，行内放列，列宽以百分比表示，因此始终随父元素伸缩；列之间的间隙由列的横向内边距形成，行再用负外边距抵消这部分内边距，使列内内容与容器左缘对齐^[4][6]。嵌套时在列内再放一行与若干列，内层列的份数合计不超过12份^[4]。

响应式依靠断点实现。第5版的默认断点为0、576像素、768像素、992像素、1200像素和1400像素，对应xs到xxl六档，类名形如col-md-6，含义是从该断点起采用这一列宽，更窄的屏幕上则继承上一档的规则^[4][7]。断点判断基于最小宽度的媒体查询，所以给小屏写的类会同时作用于更大的屏幕，除非被更高档位的类覆盖^[6]。

第5版的网格与对齐由弹性盒子布局实现，源码中以Sass变量和mixin定义列数、栏间距与断点映射，再由这些变量生成全部预设类^[4]。修改列数、断点或栏间距后重新编译，可得到一整套新的列宽、偏移与顺序类^[4]。例如列宽可写成 $w = \frac{n}{12} \times 100\%$，其中n为列所跨的份数^[6]。

交互行为由独立的JavaScript插件提供，多数插件可只靠HTML的data属性声明启用，不必手写脚本；组件的行为逻辑集中在插件代码中，样式则来自配套CSS^[5][2]。

发展历程

框架的前身是Twitter内部的一套工具，名为Twitter Blueprint，由设计师Mark Otto与Jacob Thornton编写，初衷是让公司内部界面在代码层面保持一致，减少因使用不同代码库而带来的维护负担^[1]。项目在公司内部经过数月开发，并以Hack Week的形式吸引更多开发者参与，随后改用Bootstrap之名，于2011年8月19日作为开源项目对外发布^[1]。

2012年1月31日发布的第2版加入十二列网格与响应式组件，并对既有组件做了调整，此后框架开始支持随设备调整的响应式网页设计^[1]。2013年8月19日发布的第3版把移动设备优先定为设计方针，界面转向扁平化风格^[1]。

第4版的开发在2015年公布，首个alpha版于2015年8月19日发布，其后经过多个alpha与beta版本，正式版于2018年1月发布^[8][9]。这一版把样式预处理语言由Less换成Sass，默认启用弹性盒子，引入Reboot模块统一重置样式，新增大量工具类，并把构建脚本改为npm脚本^[9]。

第5版于2021年5月5日发布正式版，移除了对jQuery的依赖，改用原生JavaScript重写插件，不再支持Internet Explorer，并加入从右到左书写的排版支持^[2]。

应用

该框架的典型用途是快速搭出结构一致的页面骨架。使用者在文档中挑选组件样例，复制结构并套上类名，即可得到带悬停态与聚焦态的按钮、导航栏、卡片、表格与表单控件，无需从零编写样式^[5][4]。后台管理面板、内部工具与原型页面是常见场景，因为这些场景更看重交付速度与样式统一，而非独特的视觉识别。

在服务端渲染的模板体系中，框架自带的脚本组件省去了另配前端交互库的步骤；在React等组件化框架中，则通常经由第三方封装库使用其组件^[10]。引入方式包括直接下载编译产物、经包管理器安装源码，或通过内容分发网络引用现成文件^[3][5]。此外，其网格与断点设置也被其他项目借鉴，例如学术机构的设计规范即以该框架的十二列网格为基础制定^[11]。

局限

默认视觉风格鲜明是常被提到的一点。组件的圆角、栅格节奏与表单样式带有较强倾向，设计一旦偏离这套约定，就需要逐条覆盖框架样式，覆盖成本可能超过直接手写；因此不少基于该框架的站点在外观上容易被辨认出同源^[12]。修改颜色与字体相对简单，调整间距、布局或组件行为则往往要另写CSS^[10]。

整包引入会带来体积负担。完整编译后的CSS约在200KB量级，经gzip压缩后约30KB左右，其中包含页面并未使用的组件样式；按需引入可减小体积，但需要自行配置构建流程^[13][10]。使用JavaScript组件的项目还需加载相应脚本与定位库^[5]。

在组件化前端框架中集成并非原生。其插件基于DOM操作，与框架自身的数据驱动渲染方式不同，通常需要经过封装库中转，封装层的更新又可能滞后于框架版本^[10]。无障碍方面，部分组件默认不实现完整的WAI-ARIA菜单模式，下拉菜单未附带相关角色与展开状态属性，默认色板中的个别配色也未达到对比度要求，需要开发者补充与调整。

浏览器支持范围随版本收紧。第5版不再支持Internet Explorer，面向旧版浏览器的项目只能停留在第4版；第4版之后的一次组件与类名清理也带来迁移成本，多处旧类名被移除或合并^[2]。

参见

• Tailwind CSS —— 以原子类组合样式，与该框架的预置组件路线形成对照。

• Sass —— 第4版起采用的样式预处理语言，用于定义变量、映射与mixin。

• 响应式网页设计 —— 该框架网格与断点机制服务的核心目标。

• jQuery —— 第5版之前该框架插件所依赖的脚本库。

• GitHub —— 框架源码的托管与协作平台。