ReactJS - 引导程序

---

---

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 应用程序并使用以下命令启动它。

接下来，打开主 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风格。

最后，在浏览器中打开应用程序，检查引导类是否在按钮元素中正确应用，如下所示 -

导入功能（仅限 CSS）

在本节中，让我们看看如何使用导入功能集成 Bootstrap CSS。

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

接下来，使用以下命令安装 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 + 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 反应 （https://bootstrap-4-react.com//)
• 反应带 （https://reactstrap.github.io/)
• 来自 coreUI 的 Bootstrap React （https://coreui.io/bootstrap-react/)

在本章中，让我们通过创建一个简单的 React 应用程序来了解如何使用 React-bootstrap。

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

接下来，使用以下命令安装 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风格。

最后，在浏览器中打开应用程序，检查引导类是否在按钮元素中正确应用，如下所示 -

总结

React 有很多选项可以与 Bootstrap 库集成。React 使 Bootstrap 组件能够在 Web 应用程序中顺利迁移到 React Bootstrap 组件。丰富的第三方 Bootstrap 组件集使开发人员能够在不离开 Bootstrap 库的情况下提供出色的 UI/UX 体验。