Bootstrap 是最 流行的前端框架之一，被广泛用于快速创建 视觉吸引力强、具有响应式且以移动设备优先的网站。它提供了预先设计的 UI 组件、网格系统以及各种 CSS 类，帮助我们快速、高效地构建以移动设备优先的响应式 Web 应用程序。
在 本篇文章 中，我们将引导大家了解如何在 React 中有效地使用 Bootstrap。
!How-to-Use-Bootstrap-with-React如何在 React 中使用 Bootstrap？
要在 React 中使用 Bootstrap 并利用其类名进行样式设置，我们可以直接在 HTML 文件中添加 Bootstrap CDN，使用 Bootstrap npm 包，也可以使用直接提供已样式化 React 组件的 React-Bootstrap 库。
主要有三种主要方法可以在 ReactJS 应用程序中使用 Bootstrap。
如果你是 React 新手或者想加深理解，建议参考 <a href="https://www.geeksforgeeks.org/courses/react-js-beginner-to-advance?utmcampaign=662howtousebootstrapwithreact&utmmedium=gfgcontenticp&utmsource=geeksforgeeks"> React JS 初级到高级课程 。这门综合课程涵盖了从基础到高级的所有概念，确保你能够使用 React 构建健壮的应用程序。
在 React 中使用 Bootstrap 的三种方法
- 使用 Bootstrap CDN
- 导入 Bootstrap 作为依赖项
- 使用 React-Bootstrap
方法 1：使用 Bootstrap CDN
第 1 步. 添加 Bootstrap CSS 链接
在你的 public/index.html 文件中，在 部分添加以下行以引入 Bootstrap CSS：
第 2 步. 添加 Bootstrap 的 JavaScript 文件
如果你的应用需要 Bootstrap 的交互式 JavaScript 组件（如模态框、工具提示等），请在 结束标签之前添加以下脚本：
以下是实现代码
HTML
CODEBLOCK_28337972
输出结果
!bootstrap使用 Bootstrap CDN
在这段代码中
- 通过 CDN 引入了 Bootstrap 5.3.2 CSS 用于应用程序的样式设计。
- 在 末尾加载了 Popper.js 和 Bootstrap 的 JavaScript 捆绑包（其中包含必要的插件）。
- 包含一个
作为 React 应用的挂载点。
方法 2：导入 Bootstrap 作为依赖项
如果我们更倾向于管理应用程序的依赖项，我们可以通过 npm 安装 Bootstrap 并将其导入到 React 应用中。当使用像 Webpack 这样的模块打包工具，或者希望对包版本有更多控制时，这种方法特别有用。
安装和导入 Bootstrap 的步骤
1. 安装 Bootstrap 和支持库
运行以下命令将 Bootstrap 和 Popper.js（某些 Bootstrap 组件需要它们）作为依赖项进行安装：
npm install bootstrap @popperjs/core
2. 在 React 应用中导入 Bootstrap
安装完软件包后，打开你的 src/index.js（对于 TypeScript 则是 src/index.tsx）并导入 Bootstrap CSS：
“`
import ‘bootstrap/dist/