Bootstrap 环境引入

Bootstrap 不需要"安装",本质就是一组 CSS 和 JS 文件。这一章带你过一遍三种主流引入方式:CDN(最快)、npm 包(工程化)、Sass 源码(深度定制)。新手建议先从 CDN 开始,跑起来再考虑迁移。

方式一:CDN 引入(推荐新手)

CDN(内容分发网络)方式最简单——直接通过 link 和 script 标签从 jsdelivr 加载 Bootstrap 文件,不需要下载任何东西。这是学习、做原型、写 demo 的最佳选择。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap CDN 引入</title>
  <!-- 1. CSS 放 head 里,先加载样式 -->
  <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">
    <button class="btn btn-primary">CDN 按钮</button>
  </div>

  <!-- 2. JS bundle 放 body 末尾,让 DOM 先加载 -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

几个关键点:

Bootstrap Icons 怎么引入

Bootstrap 团队维护了一个图标库 Bootstrap Icons,2000+ 个 SVG 图标,用法和字体图标一样简单。它独立于 Bootstrap 主包,需要单独引入。

<!-- Bootstrap Icons(独立 CDN) -->
<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />

<!-- 用法:给 i 标签加 bi bi-图标名 -->
<button class="btn btn-outline-primary">
  <i class="bi bi-house-door-fill"></i> 回首页
</button>

<a class="btn btn-danger" href="#">
  <i class="bi bi-trash"></i> 删除
</a>

<span class="text-warning">
  <i class="bi bi-star-fill"></i> 收藏
</span>

图标的 class 命名规则是 bi bi-名字。完整列表见 icons.getbootstrap.com,搜索、复制 class 名都方便。

方式二:npm 安装(工程化项目)

如果你的项目已经用了打包工具(Vite、Webpack、Rollup),或者用 React / Vue 框架,推荐用 npm 安装。这样可以把 Bootstrap 当作依赖管理,版本锁定、Tree-shaking、Sass 定制都更方便。

# 进入项目目录
cd my-project

# 1. 初始化 package.json(如果还没有)
npm init -y

# 2. 安装 Bootstrap(以及 Popper.js,模态框/下拉需要)
npm install bootstrap @popperjs/core

# 3. (可选)安装 Bootstrap Icons
npm install bootstrap-icons

装好后,在项目入口文件引入:

// 方式 A:直接在 JS 里引入(适合简单项目)
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

// 方式 B:在 Sass 主文件里引入(推荐,便于定制)
// style.scss:
//   @use "bootstrap/scss/bootstrap" as *;

方式 A 适合不需要定制主题的项目——直接引入编译好的成品。方式 B 适合需要改主题色、圆角、间距的项目——通过 Sass 自定义变量,详见下节。

方式三:Sass 源码定制(深度定制)

Bootstrap 用 Sass 构建,源码是一堆 .scss 文件,里面有几百个变量控制颜色、间距、字体、断点等。要深度定制主题,最干净的做法是覆盖 Sass 变量而不是改编译后的 CSS——后者升级版本时会全部丢失。

新建一个 custom.scss 文件:

// custom.scss —— 必须在引入 Bootstrap 之前定义变量
// 1. 覆盖主题色(Primary 改成绿色系)
$primary: #2ecc71;
$secondary: #7f8c8d;
$success: #27ae60;
$danger:  #e74c3c;

// 2. 覆盖圆角、间距等设计变量
$border-radius:    .5rem;
$border-radius-sm: .3rem;
$border-radius-lg: .8rem;
$spacer: 1.2rem;

// 3. 引入 Bootstrap(它会用上面的变量编译)
@use "bootstrap/scss/bootstrap" as *;

// 现在你的 btn-primary 已经是绿色圆角更大的按钮

然后用 sass CLI 把它编译成普通 CSS:

# 用 sass CLI 把 custom.scss 编译成 css
sass custom.scss custom.css

# 或者用 Dart Sass 监听模式(改保存自动编译)
sass --watch custom.scss:custom.css

# 然后在 HTML 里引入编译后的 custom.css,而不是 Bootstrap 原版
# <link href="custom.css" rel="stylesheet" />

这样编译出来的 custom.css 已经包含 Bootstrap 全部样式,且用了你定义的主题色——再没有任何一行代码改了 Bootstrap 源文件,未来升级版本时只改 npm 包版本,定制文件原样保留。

三种方式怎么选?

引入后验证

引入完成后,写一个最简单的按钮测试是否生效:

小结

这一章你学会了三种引入方式:CDN 最快上手、npm 适合工程化、Sass 源码适合深度定制。新手请先用 CDN 把后续教程的代码跑起来,熟练后再迁移到 npm。下一篇我们正式进入 Bootstrap 的核心——栅格系统。

← 上一篇 Bootstrap 简介

下一篇 栅格系统 →

✈️💬