Bootstrap（前端框架）

Bootstrap 是一个面向响应式、移动优先开发的开源前端框架，由 Twitter（现 X）工程师 Mark Otto 与 Jacob Thornton 创建，2011 年 8 月在 GitHub 开源，早期名为 Twitter Blueprint。它把常用的界面元素抽象为一套统一的 CSS 类与可选的 JavaScript 组件，让不擅长设计的开发者也能快速做出风格一致、适配各种屏幕的页面。

概述

Bootstrap 的核心由三部分组成：其一是十二列栅格系统，基于 Flexbox 实现，配合断点前缀（如 sm、md、lg、xl）声明不同屏幕宽度下的布局；其二是丰富的预制组件，包括导航栏、按钮、卡片、模态框、下拉菜单、轮播、表单控件等；其三是大量原子化的工具类（utilities），覆盖间距、颜色、排版、显示隐藏等常见样式需求。Bootstrap 4 起放弃对 IE 老版本的兼容并全面转向 Flexbox；Bootstrap 5（2021 年发布）移除了对 jQuery 的依赖，改用原生 JavaScript，并引入 CSS 自定义属性以便主题定制。框架源码使用 Sass 编写，开发者可通过修改变量来定制主题色、圆角、间距体系等。

核心特点

• 响应式栅格：十二列布局加断点系统，一套标记适配手机、平板与桌面。
• 组件齐全：常见界面模式开箱即用，显著降低样式开发成本。
• 移动优先：默认样式面向小屏幕设计，再通过断点向大屏增强。
• 可定制：基于 Sass 变量与 CSS 自定义属性调整主题，无需覆盖式改写。
• 生态成熟：文档完善，衍生模板、主题与后台框架数量庞大。

应用场景

Bootstrap 适合需要快速交付且对视觉个性要求不高的项目，如后台管理系统、企业官网、原型演示与内部工具。在服务端渲染的传统网站（如 PHP、Django、Rails 项目）中尤为流行。近年在追求高度定制视觉的产品中，Tailwind CSS 等原子化方案与组件库分走了不少使用场景，但 Bootstrap 仍是 GitHub 上星标最高的 CSS 框架之一，存量项目极多。

常见问题

问：Bootstrap 5 还需要 jQuery 吗？答：不需要。从 5.0 版本起，所有交互组件都改为原生 JavaScript 实现，jQuery 依赖被彻底移除。

问：Bootstrap 和 Tailwind CSS 有什么区别？答：Bootstrap 提供成品组件与默认视觉风格，上手快但页面容易雷同；Tailwind 只提供原子工具类，样式完全由开发者组合，定制自由度更高。

问：如何避免页面一看就是 Bootstrap 风格？答：通过 Sass 变量定制主题色、字体、圆角与阴影，或引入第三方主题，避免直接使用默认配色与默认组件外观。