如何在React中引入本地下载的Bootstrap？无需npm/yarn或CDN

云上老周

2026-8-25

在React中本地使用Bootstrap（无需npm/yarn、CDN）

下载Bootstrap本地资源
去Bootstrap官网下载编译好的压缩包（选「Compiled CSS and JS」版本），解压后得到css和js文件夹，核心文件是bootstrap.min.css和bootstrap.min.js。另外Bootstrap 5的弹窗、下拉等组件依赖Popper，得单独下载Popper编译好的JS文件（比如popper.min.js）。
把资源放到React项目里
在React项目的public文件夹下新建vendor/bootstrap目录，将解压后的css、js文件夹复制进去，再把Popper的JS文件放到vendor/bootstrap/js目录中。

在入口HTML中引入资源
打开public/index.html，在<head>标签里添加本地Bootstrap CSS的引用：

<link rel="stylesheet" href="%PUBLIC_URL%/vendor/bootstrap/css/bootstrap.min.css">

然后在</body>标签之前（注意顺序，Popper要在Bootstrap JS前面）添加JS引用：

<script src="%PUBLIC_URL%/vendor/bootstrap/js/popper.min.js"></script>
<script src="%PUBLIC_URL%/vendor/bootstrap/js/bootstrap.min.js"></script>

在React组件中使用Bootstrap
现在可以直接在组件的JSX里使用Bootstrap的类名，示例：

function App() {
  return (
    <div className="container mt-3">
      <button className="btn btn-primary">测试按钮</button>
      <div className="alert alert-success mt-2">这是一个提示框</div>
    </div>
  );
}
export default App;

额外：使用Bootstrap Icons（可选）
若需要图标，去Bootstrap Icons官网下载图标包，解压后把icons文件夹放到public/vendor/bootstrap下，然后在index.html的<head>里引入图标CSS：
```
<link rel="stylesheet" href="%PUBLIC_URL%/vendor/bootstrap/icons/bootstrap-icons.css">
```
之后就能用图标类名，比如<i className="bi bi-heart-fill text-danger"></i>。