Bootstrap 简介
Bootstrap 是目前最流行的前端 UI 框架之一，由 Twitter 团队开发并开源。它提供了一整套现成的 CSS 样式、HTML 组件和 JavaScript 插件，让开发者不需要从零手写样式，就能快速搭出美观、统一、适配手机的网页。学习 Bootstrap，是前端入门和快速原型开发的捷径。
Bootstrap 是什么
Bootstrap 本质是一个「样式库 + 组件库」：它把按钮、表格、表单、导航栏、轮播图等常见界面元素封装成可直接使用的类名（class）。使用时只需在 HTML 标签上写对应的类，例如 class="btn btn-primary"，就能得到一个带样式的蓝色按钮，无需自己写任何 CSS。
为什么值得学
- 响应式设计：基于栅格（Grid）系统，一套代码适配手机、平板、电脑。
- 开箱即用：几十种现成组件，改几个类名即可完成常见页面。
- 跨浏览器：官方已处理各浏览器的样式差异，显示效果一致。
- 文档完善：官方文档与示例丰富，遇到问题容易查到答案。
版本演进
从 Bootstrap 2、3、4 一路走到 Bootstrap 5。Bootstrap 4 引入 Flexbox 栅格；Bootstrap 5（2021 年发布）进一步移除对 jQuery 的依赖、改用 CSS 变量、新增 xxl 断点并支持 RTL（从右到左）排版。本书全部示例基于 Bootstrap 5。
第一个 Bootstrap 页面
下面是一个最小页面：通过 CDN 引入 Bootstrap 5，页面马上拥有框架提供的排版与按钮样式：
<!-- 引入 Bootstrap 5：CSS 放在 <head>，JS 放在 <body> 末尾 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>你好，Bootstrap！</h1>
<a class="btn btn-primary" href="https://example.com">主按钮</a>
<a class="btn btn-outline-secondary" href="https://example.com">描边按钮</a>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
显示效果：页面出现默认的 h1 标题、一个蓝色实心按钮和一个灰色描边按钮；不写任何自定义 CSS，字体、间距、圆角已被 Bootstrap 统一处理。
小结
Bootstrap 用「写类名代替写样式」的方式大幅降低了网页开发成本，是响应式布局与常用组件的首选方案。下一节我们学习如何把 Bootstrap 引入自己的项目。