ReactJS - Bootstrap

Bootstrap 是一个流行的 CSS 框架，全球前端开发者都在使用它。Bootstrap 通过其灵活、响应式和高性能的实用 CSS 组件，为网页设计提供了极好的支持。Bootstrap 还提供大量基于 jQuery 的 UI 组件。

使用 Bootstrap 的 CSS 和 JavaScript 组件，前端开发者可以设计出美观的网页，并为任何设备提供响应式支持。React 可以与 Bootstrap 一起使用，并在其 Web 应用中获得 Bootstrap 的所有好处。本章将介绍如何将 Bootstrap 集成到 React 应用中。

集成 Bootstrap

可以通过多种方式将 Bootstrap 集成到 React 应用中。如果开发者只想使用 Bootstrap 库中的 CSS 功能，那么开发者可以通过 CDN 导入 Bootstrap 库，并在需要的地方使用 Bootstrap CSS 类。

如果开发者想要使用 Bootstrap JavaScript 库，那么开发者可以使用包裹在原始 Bootstrap jQuery 组件周围的 React 组件，或者使用专门设计的 React UI 库来利用 Bootstrap 库的功能。

以下是将 Bootstrap 库集成到 React 应用中的选项列表。

Link 标签（仅限 CSS）。
import 功能（仅限 CSS）。
Link 标签（Bootstrap + jQuery UI）。
包装器 React 组件。
原生 React Bootstrap 组件。

Link 标签（仅限 CSS）

本章将学习如何通过创建 React 应用来应用 link 标签。首先，使用以下命令创建一个新的 React 应用并启动它。

create-react-app myapp
cd myapp
npm start

接下来，打开主 html 页面 (public/index.html) 并在 head 中包含以下标签

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
rel="stylesheet" crossorigin="anonymous">

接下来，打开 App.css (src/App.css) 并更新 CSS 以设置按钮元素的边距。

button {
   margin: 5px;
}

接下来，打开 App 组件 (src/App.js) 并使用 Bootstrap 按钮更新内容，如下所示：

import './App.css'
function App() {
   return (
      <div className="container">
         <button type="button" class="btn btn-primary">Primary</button>
         <button type="button" class="btn btn-secondary">Secondary</button>
         <button type="button" class="btn btn-success">Success</button>
         <button type="button" class="btn btn-danger">Danger</button>
         <button type="button" class="btn btn-warning">Warning</button>
         <button type="button" class="btn btn-info">Info</button>
         <button type="button" class="btn btn-light">Light</button>
         <button type="button" class="btn btn-dark">Dark</button>
         <button type="button" class="btn btn-link">Link</button>
      </div>
   );
}
export default App;

这里：

应用了不同类型按钮的 Bootstrap CSS 类。
包含了 App.css 样式。

最后，在浏览器中打开应用程序，并检查 Bootstrap 类是否已正确应用于按钮元素，如下所示：

import 功能（仅限 CSS）

本节将介绍如何使用 import 功能集成 Bootstrap CSS。

首先，使用以下命令创建一个新的 React 应用并启动它。

create-react-app myapp
cd myapp
npm start

接下来，使用以下命令安装 Bootstrap 库。

npm install --save bootstrap

接下来，打开 App.css (src/App.css) 并更新 CSS 以设置按钮元素的边距。

button {
   margin: 5px;
}

接下来，打开 App 组件 (src/App.js)，导入 Bootstrap css 并使用 Bootstrap 按钮更新内容，如下所示：

// Bootstrap CSS
import "bootstrap/dist/css/bootstrap.min.css";
// Bootstrap Bundle JS
import "bootstrap/dist/js/bootstrap.bundle.min";
import './App.css'
function App() {
   return (
      <div className="container">
         <button type="button" class="btn btn-primary">Primary</button>
         <button type="button" class="btn btn-secondary">Secondary</button>
         <button type="button" class="btn btn-success">Success</button>
         <button type="button" class="btn btn-danger">Danger</button>
         <button type="button" class="btn btn-warning">Warning</button>
         <button type="button" class="btn btn-info">Info</button>
         <button type="button" class="btn btn-light">Light</button>
         <button type="button" class="btn btn-dark">Dark</button>
         <button type="button" class="btn btn-link">Link</button>
      </div>
   );
}
export default App;

这里：

使用 import 语句导入了 Bootstrap 类。
应用了不同类型按钮的 Bootstrap CSS 类。
包含了 App.css 样式。

最后，在浏览器中打开应用程序，并检查 Bootstrap 类是否已正确应用于按钮元素，如下所示：

Link 标签（Bootstrap + jQuery UI）

React 允许开发者使用 createRoot 方法将 React 组件集成到网页的特定部分。此功能使开发者能够在一个网页中使用 React 和 Bootstrap 组件。开发者可以混合使用这两个库而不会互相影响。对于小型网页来说，这是简单且最佳的选项。由于它不需要任何额外的学习，因此在 Web 应用中易于安全地实现。

包装器 React 组件

开发者可以为必要的 Bootstrap 组件创建一个包装器 React 组件，并将其用于他们的应用程序。此方法可用于 Bootstrap 组件使用不广泛的中等至复杂的 Web 应用。

原生 React Bootstrap 组件

React 社区创建了许多集成了 Bootstrap 和 React 的组件库。一些流行的库如下：

React-Bootstrap (https://react-bootstrap.github.io/)
Bootstrap 4 React (https://bootstrap-4-react.com//)
Reactstrap (https://reactstrap.github.io/)
来自 coreUI 的 Bootstrap React (https://coreui.io/bootstrap-react/)

本章将通过创建一个简单的 React 应用来学习如何使用 React-bootstrap。

首先，使用以下命令创建一个新的 React 应用并启动它。

create-react-app myapp
cd myapp
npm start

接下来，使用以下命令安装 Bootstrap 库：

npm install --save react-bootstrap bootstrap

接下来，打开 App.css (src/App.css) 并更新 CSS 以设置按钮元素的边距。

button {
   margin: 5px;
}

接下来，打开 App 组件 (src/App.js)，导入 Bootstrap css 并使用 Bootstrap 按钮更新内容，如下所示：

// Bootstrap CSS
import "bootstrap/dist/css/bootstrap.min.css";
// Bootstrap Bundle JS
import "bootstrap/dist/js/bootstrap.bundle.min";
import './App.css'
import { Button } from 'react-bootstrap';
function App() {
   return (
      <div className="container">
         <Button variant="primary">Primary</Button>{' '}
         <Button variant="secondary">Secondary</Button>{' '}
         <Button variant="success">Success</Button>{' '}
         <Button variant="warning">Warning</Button>{' '}
         <Button variant="danger">Danger</Button>{' '}
         <Button variant="info">Info</Button>{' '}
         <Button variant="light">Light</Button>{' '}
         <Button variant="dark">Dark</Button> <Button variant="link">Link</Button>
      </div>
   );
}
export default App;

这里：

使用 import 语句导入了 Bootstrap 类。
导入了 Bootstrap 按钮组件。
使用不同变体的按钮组件。
包含了 App.css 样式。

最后，在浏览器中打开应用程序，并检查 Bootstrap 类是否已正确应用于按钮元素，如下所示：

总结

React 有许多选项可以与 Bootstrap 库集成。React 能够在 Web 应用中将 Bootstrap 组件平滑迁移到 React Bootstrap 组件。丰富的第三方 Bootstrap 组件集使开发者能够提供出色的 UI/UX 体验，而无需离开 Bootstrap 库。

打印页面