笙亿网络策划

React 怎么集成 Bootstrap？

约 13 分钟读完 6 阅
文章导读
Previous Quiz Next Bootstrap 是一个广受欢迎的 CSS 框架，被全球前端开发者广泛使用。Bootstrap 通过其灵活、响应式且高性能的实用 CSS 组件，为网页设计提供了出色的支持。Bootstrap 还提供大量基于 jQuery 的 UI 组
📋 目录
  1. 一 集成 Bootstrap
  2. 二 Link 标签（仅 CSS）
A A

React - Bootstrap

Previous
Quiz
Next

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 组件，或者专为利用 Bootstrap 库特性而设计的专用 React UI 库。

以下是将 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/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

接下来，打开 App.css（src/App.css），并更新 CSS 为 button 元素设置 margin。

button {
   margin: 5px;
}

App.js

接下来，打开 App 组件（src/App.js），并使用以下所示的 bootstrap button 更新内容：

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;

这里，

  • 为不同类型的 button 应用了 bootstrap CSS class。

  • 包含了 App.css 样式。

最后，在浏览器中打开应用，检查 bootstrap class 是否正确应用到 button 元素，如下所示：

Integrating 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。

button {
   margin: 5px;
}

App.js

接下来，打开 App 组件（src/App.js），导入 bootstrap css，并使用以下所示的 bootstrap button 更新内容：

// 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 class。

  • 为不同类型的 button 应用了 bootstrap CSS class。

  • 包含了 App.css 样式。

最后，在浏览器中打开应用，检查 bootstrap class 是否正确应用到 button 元素，如下所示：

Import Feature

Link 标签（Bootstrap + jQuery UI）

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

包装 React 组件

开发者可以为必要的 bootstrap 组件创建一个包装 React 组件，并在应用中使用它。此方法适用于中等至复杂的 Web 应用，其中 bootstrap 组件的使用并不广泛。

原生 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/)

  • Bootstrap React from coreUI (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。

button {
   margin: 5px;
}

App.js

接下来，打开 App 组件（src/App.js），导入 bootstrap css，并使用以下所示的 bootstrap button 更新内容：

// 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 class。

  • 导入了 bootstrap button 组件。

  • 使用不同的 variant 使用了 button 组件。

  • 包含了 App.css 样式。

最后，在浏览器中打开应用，检查 bootstrap class 是否正确应用到 button 元素，如下所示：

Native React Bootstrap

总结

React 有多种选项与 bootstrap 库集成。React 使 bootstrap 组件在 Web 应用中平滑迁移到 React bootstrap 组件。丰富的第三方 bootstrap 组件使开发者能够在不脱离 bootstrap 库的情况下提供出色的 UI/UX 体验。