简介
React 是一个流行的 JavaScript 库，用于构建用户界面。React Bootstrap 是基于 Bootstrap 的一组 React 组件，通过提供示例代码和开发文档，帮助开发者快速构建出外观精美的网页应用。react-bootstrap-externaljs 是一个可以在你的网站页面中使用 Bootstrap 样式的 npm 包，我们将在本文中介绍它的使用方法。
安装和使用
在继续下面的步骤前，请确保已经安装 Node.js 和 npm。
安装
使用 npm 安装 react-bootstrap-externaljs：
npm install react-bootstrap-externaljs
安装完成后，你会发现在你的项目中多了一个 node_modules 的文件夹，里面有一个 react-bootstrap-externaljs 的文件夹。
使用
在你的 React 组件中，你可以使用以下代码来导入 react-bootstrap-externaljs：
import 'react-bootstrap-externaljs';
这样，在你的组件中就可以使用 Bootstrap 样式了。以 Button 组件为例，我们可以这样使用：
-- -------------------- ---- -------
------ -----------------------------
------ - ------ - ---- ------------------
-------- ----- -
------ -
------- ----------------------- -------------------
--
-
------ ------- ----这里我们使用了 Bootstrap 的 primary 样式，也可以使用其它样式，比如：secondary、success、danger、warning、info 和 light。更多样式可以参考 Bootstrap 官方文档。
引入 CDN 预编译的 JS 和 CSS 文件
如果你希望更直接一点的方式，而不是使用 react-bootstrap-externaljs，你可以在你的网页中直接引入 CDN 预编译的 JS 和 CSS 文件。
在 HTML 的头部中加入以下代码：
<!-- CSS 文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" integrity="***" crossorigin="anonymous"> <!-- JS 文件 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js" integrity="***" crossorigin="anonymous"></script>
其中，href 和 src 中的版本号是你需要引入的版本。你可以在 Bootstrap 的官方文档中找到最新的版本号。
引入后，你可以像这样使用 Bootstrap 样式：
<button class="btn btn-primary">Hello Bootstrap!</button>
总结
在本文中，我们介绍了如何在你的 React 项目中使用 react-bootstrap-externaljs 包来使用 Bootstrap 样式，还介绍了直接引入 CDN 预编译的 JS 和 CSS 文件的方法。希望本文能够帮助你更好地使用 React 和 Bootstrap。完整示例代码可以在以下的 GitHub 仓库中找到：
https://github.com/example/react-bootstrap-externaljs-example
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559e381e8991b448d7799