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 组件，也可以使用旨在利用 bootstrap 库功能的特殊 react UI 库。

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

• 链接标签(仅限 CSS)。

• 导入功能(仅限 CSS)。

• 链接标签(Bootstrap + jQuery UI)。

• 包装器 react 组件。

• 原生 react bootstrap 组件。

链接标签(CSS仅)

让我们在本章中学习如何通过创建 React 应用程序来应用链接标签。首先，创建一个新的 React 应用程序并使用以下命令启动它。

create-react-app myapp
cd myapp
npm start

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

<!-- 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: 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 类是否正确应用于按钮元素，如下所示 −

导入功能(仅限 CSS)

让我们在本节中了解如何使用导入功能集成 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 类是否正确应用于按钮元素，如下所示 −

链接标签 (Bootstrap + jQuery UI)

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

包装器 React 组件

开发人员可以为必要的引导组件创建一个包装器 React 组件，并可以在其应用程序中使用它。此方法可用于引导组件未广泛使用的中等到复杂的 Web 应用程序。

原生 React 引导组件

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 组件。丰富的第三方引导组件使开发人员无需脱离引导库即可提供出色的 UI/UX 体验。