Bootstrap 简介

在动手装环境之前,我们先认识一下 Bootstrap 到底是什么、为什么这么流行、能用它做什么。理解了背景,后面学起来会更有方向感。

Bootstrap 是什么?

Bootstrap 是 Twitter(现 X)的两位设计师 Mark Otto 和 Jacob Thornton 在 2011 年开源的前端 UI 框架。它最初是 Twitter 内部为了统一众多产品线视觉风格而做的工具集,开源后迅速成为全球最流行的前端框架之一。它的核心理念是"组件化 + 移动优先"——把按钮、表单、卡片、导航栏这些通用 UI 元素预先做好,开发者只要加对应的 class 名就能用。

诞生背景:解决"反复造轮子"

故事要从 2010 年的 Twitter 说起。当时 Twitter 内部不同团队各写各的 CSS,代码风格、按钮样式、表单组件五花八门,设计师难以统一视觉,前端工程师每天都在重复写相同的样式。Mark Otto 和 Jacob Thornton 决定做一套统一的样式与组件库,这就是 Bootstrap 的雏形(原名 Twitter Blueprint)。2011 年 8 月,它以 Bootstrap 之名开源,从此引爆整个前端社区。

Bootstrap 几个关键节点:

2011 年  Bootstrap 由 Twitter 工程师 Mark Otto 和 Jacob Thornton 开源
2013 年  Bootstrap 3 发布,采用"移动优先"理念,成为行业标准
2018 年  Bootstrap 4 发布,改用 Flexbox 栅格、放弃 IE9
2021 年  Bootstrap 5 发布,移除 jQuery、引入 CSS 变量、用原生 JS
2023 年  Bootstrap 5.3 稳定,支持深色模式与颜色模式 API

Bootstrap 最大的贡献:把"响应式"做成标配

在 Bootstrap 出现之前,让一个页面同时适配手机和桌面是相当繁琐的事——你得自己写一堆 media query,手动调每张图片的宽度。Bootstrap 引入了著名的"12 列栅格系统",配合一组断点(xs / sm / md / lg / xl / xxl),只要写对 class,页面就会自动在不同屏幕宽度下重新排列。这套思路后来几乎成了行业标准,几乎所有 CSS 框架都借鉴了它。

看一个最简单的 Bootstrap 页面:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Hello</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <div class="container py-5 text-center">
    <h1 class="display-4 fw-bold text-primary">Hello, Bootstrap!</h1>
    <p class="lead text-muted">不写一行 CSS,也能做出像样的页面。</p>
    <button class="btn btn-primary btn-lg">点我</button>
  </div>
</body>
</html>

注意里面没有一行自定义 CSS,所有样式都是通过 class 名唤起的:container 是居中容器,display-4 是大标题字号,fw-bold 是加粗,text-primary 是主题色文字,btn btn-primary btn-lg 是大号主要按钮。把代码存成 html 文件双击打开,就是一个像样的页面。

Bootstrap 5 的核心特点

移除 jQuery 依赖:Bootstrap 4 之前的交互组件(模态框、轮播、下拉)依赖 jQuery;5.0 起改用原生 ES6 JS,bundle 体积更小、加载更快。
CSS 变量驱动:几乎每个组件都用 CSS 自定义属性(变量),通过覆盖变量就能改主题色、圆角、间距,不用重编译 Sass。
移动优先 + Flexbox 栅格:栅格用 Flexbox 实现,布局更灵活,垂直对齐、顺序反转都支持。
组件丰富:官方提供 20+ 组件——按钮、表单、卡片、导航栏、模态框、轮播、折叠、下拉、警告、徽章、面包屑、分页等,几乎覆盖常见 UI 需求。
工具类海量:间距、flex、文本对齐、显隐、阴影、圆角等都有现成的 class,直接拼装即可。
无障碍(a11y)友好:组件遵循 ARIA 规范,键盘导航、屏幕阅读器支持完善。
官方图标库 Bootstrap Icons:同团队维护,2000+ SVG 图标,用法和字体图标一样简单。

Bootstrap 都用在哪?典型场景

企业官网 / 落地页:风格统一、视觉规范,适合快速出"看着不丑"的页面。
后台管理系统:大量 admin 模板(sb-admin、Metronic)基于 Bootstrap,组合表格、表单、卡片极快。
演示原型 / Demo:汇报演示、内部测试用页面,几分钟就能搭好。
博客 / 文档站:搭配 Bootstrap 的排版工具类,内容站点也合适。
教学场景:几乎所有前端入门课都会用 Bootstrap 讲组件化、响应式概念。

简单说:需要快速出活、视觉一致、自适应多端的页面,Bootstrap 都很合适。

Bootstrap vs 其他方案

vs 手写 CSS:Bootstrap 现成组件多,开发速度快 3~5 倍;但风格统一,有"看起来像 Bootstrap"的特征。
vs Tailwind:Bootstrap 给你"预制家具",拿来即用但风格统一;Tailwind 给你"乐高积木",自由组合但要自己拼。两者哲学相反,各有适用场景。
vs Material UI / Ant Design:这两者绑定 React,组件更现代、风格更鲜明;Bootstrap 框架无关,纯 CSS + JS,适合任何项目。
vs Bulma / Foundation:Bootstrap 生态最大、文档最全、招聘需求最多,新手首选。

该不该学 Bootstrap?

如果你的方向是全栈开发、后端做后台、产品经理做原型、运维做内部工具,Bootstrap 几乎是必修课。即使现在 Tailwind 当道,Bootstrap 依然是"快速建站"的代名词,大量现存项目、模板、教学资料都基于它。学完本系列,你将能用 Bootstrap 独立完成一个完整的企业官网或后台 demo。

← 返回 Bootstrap 教程目录

下一篇 Bootstrap 环境引入 →

✈️💬