简体中文

ReactJS 教程

钩子

ReactJS 高级功能

附加概念

ReactJS 与 Bootstrap：初学者的整合指南

你好，未来的 React 开发者们！我很高兴能成为你们在这个激动人心的 ReactJS 和 Bootstrap 旅程中的向导。作为一名教授计算机科学多年的老师，我可以向你保证，在这个教程结束时，你将掌握如何使用 Bootstrap 使你的 React 应用程序看起来时尚和专业。那么，让我们开始吧！

ReactJS - Bootstrap

Bootstrap 是什么？

在我们开始将 Bootstrap 与 React 整合之前，让我们先了解一下 Bootstrap 是什么。想象一下你正在建造一座房子。你可以从头开始制作每一块砖、每一根钉子和每一件家具，或者你可以使用预先制作好的组件来加速这个过程。Bootstrap 就像那些预先制作好的组件，但它是用于网页开发。

Bootstrap 是一个流行的 CSS 框架，提供了一系列预先设计的组件和样式。它就像一个装满了随时可用的网站元素的宝箱，就在你的指尖。使用 Bootstrap，你可以快速创建响应式且视觉上吸引人的网页，而无需从头开始编写所有的 CSS。

为什么要在 React 中使用 Bootstrap？

你可能想知道，“我为什么要用 Bootstrap 和 React？”让我给你讲一个小故事。多年前，我有一个学生对 React 非常擅长，但在设计方面遇到了困难。他的应用程序运行完美，但看起来像是停留在90年代。然后他发现了 Bootstrap，突然之间，他的项目从“一般”变成了“惊人”，而且速度很快。

React 非常适合构建动态用户界面，但它不包含内置样式。将 React 与 Bootstrap 结合使用，你就能得到两全其美：React 强大的组件架构和 Bootstrap 美观、响应式的设计元素。

在 React 中整合 Bootstrap

现在，让我们动手实践，开始将 Bootstrap 与 React 整合。主要有两种方法：

  1. 使用 Bootstrap CSS
  2. 使用 React-Bootstrap

我们将探讨这两种方法，但首先，让我们创建一个新的 React 项目。

设置一个新的 React 项目

如果你还没有安装 Node.js，请先在你的电脑上安装它。完成后，打开你的终端并运行以下命令：

npx create-react-app my-bootstrap-app
cd my-bootstrap-app
npm start

这将创建一个新的 React 应用程序并启动开发服务器。你应该能在浏览器中看到默认的 React 应用程序。

方法 1：使用 Bootstrap CSS

将 Bootstrap 添加到你的 React 项目中最简单的方法是包含 CSS 文件。以下是如何操作的：

  1. 安装 Bootstrap：
npm install bootstrap
  1. 在你的 src/index.js 文件中导入 Bootstrap CSS：
import 'bootstrap/dist/css/bootstrap.min.css';

现在你可以在 React 组件中使用 Bootstrap 类。让我们创建一个简单的导航栏来看看它是如何工作的：

import React from 'react';

function App() {
return (
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<a className="navbar-brand" href="#">我的 Bootstrap 应用</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="切换导航">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav">
<li className="nav-item active">
<a className="nav-link" href="#">首页</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">关于</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">联系</a>
</li>
</ul>
</div>
</nav>
);
}

export default App;

这段代码使用 Bootstrap 类创建了一个响应式导航栏。navbar 类定义了主要的容器，而其他类如 navbar-expand-lg 和 navbar-light 控制了它的行为和外观。

方法 2：使用 React-Bootstrap

虽然直接使用 Bootstrap CSS 效果不错，但 React-Bootstrap 通过提供包含 Bootstrap 功能的 React 组件，又进了一步。这种方法更加符合 React 风格，并且可以使代码更干净、更易于维护。

让我们来设置它：

  1. 安装 React-Bootstrap 和 Bootstrap：
npm install react-bootstrap bootstrap
  1. 在你的 src/index.js 文件中导入 Bootstrap CSS（与之前相同）：
import 'bootstrap/dist/css/bootstrap.min.css';

现在，让我们用 React-Bootstrap 组件重写我们的导航栏：

import React from 'react';
import { Navbar, Nav } from 'react-bootstrap';

function App() {
return (
<Navbar bg="light" expand="lg">
<Navbar.Brand href="#home">我的 Bootstrap 应用</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="#home">首页</Nav.Link>
<Nav.Link href="#about">关于</Nav.Link>
<Nav.Link href="#contact">联系</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}

export default App;

这段代码实现了与之前示例相同的结果，但它使用了 React-Bootstrap 组件如 Navbar 和 Nav 而不是带有 Bootstrap 类的原始 HTML 元素。这种方法在 React 中更为自然，可以使代码更易于维护。

在 React 中使用 Bootstrap 组件

现在我们已经在 React 应用程序中设置了 Bootstrap，让我们探索一些流行的 Bootstrap 组件以及如何在 React 中使用它们。我们将创建一个简单的页面布局，使用各种 Bootstrap 组件。

import React from 'react';
import { Container, Row, Col, Card, Button } from 'react-bootstrap';

function App() {
return (
<Container>
<Row className="mt-5">
<Col md={4}>
<Card>
<Card.Img variant="top" src="https://via.placeholder.com/150" />
<Card.Body>
<Card.Title>卡片 1</Card.Title>
<Card.Text>
这是一个带有一些内容的示例卡片。
</Card.Text>
<Button variant="primary">了解更多</Button>
</Card.Body>
</Card>
</Col>
<Col md={4}>
<Card>
<Card.Img variant="top" src="https://via.placeholder.com/150" />
<Card.Body>
<Card.Title>卡片 2</Card.Title>
<Card.Text>
另一张带有不同内容的卡片。
</Card.Text>
<Button variant="secondary">探索</Button>
</Card.Body>
</Card>
</Col>
<Col md={4}>
<Card>
<Card.Img variant="top" src="https://via.placeholder.com/150" />
<Card.Body>
<Card.Title>卡片 3</Card.Title>
<Card.Text>
又一张用于展示 Bootstrap 的卡片。
</Card.Text>
<Button variant="success">发现</Button>
</Card.Body>
</Card>
</Col>
</Row>
</Container>
);
}

export default App;

在这个例子中，我们使用了几个 Bootstrap 组件：

  • Container：为我们的内容创建一个居中的容器。
  • Row 和 Col：实现 Bootstrap 的网格系统以创建响应式布局。
  • Card：在灵活的容器中显示内容。
  • Button：创建具有各种外观的按钮。

Col 组件上的 md={4} 属性告诉 Bootstrap 在中号屏幕和更大屏幕上每个列占用 4 个单位，总共 12 个单位的网格系统。这导致三个等宽的列。

在 React 中定制 Bootstrap

Bootstrap 一个非常好的特点是它的灵活性。你可以轻松地定制它以匹配你的项目独特风格。以下是一些定制方法：

1. 覆盖 Bootstrap 变量

在你的 src 目录中创建一个名为 custom.scss 的文件：

// Custom.scss

// 覆盖默认变量
$primary: #007bff;
$secondary: #6c757d;
$success: #28a745;

// 导入 Bootstrap 和它的默认变量
@import '~bootstrap/scss/bootstrap.scss';

然后，在你的 index.js 文件中导入这个文件，而不是默认的 Bootstrap CSS：

import './custom.scss';

2. 添加自定义类

你还可以在 Bootstrap 类旁边添加自己的类：

<Button className="my-custom-button" variant="primary">自定义按钮</Button>

然后在你的 CSS（或 SCSS）文件中：

.my-custom-button {
border-radius: 25px;
text-transform: uppercase;
}

结论

恭喜你！你已经迈出了整合 Bootstrap 与 React 的世界的第一步。我们介绍了在 React 项目中设置 Bootstrap 的基础知识，使用 Bootstrap 组件，甚至定制 Bootstrap 来满足你的需求。

记住，熟能生巧。尝试使用你在这里学到的东西构建一个小项目。也许是一个个人作品集页面或者一个简单的博客布局。你使用这些工具越多，你对它们就会越熟悉。

在我们结束之际，我想起了另一个学生，她最初对前端设计感到害怕。在学习了如何使用 React 和 Bootstrap 之后，她创建了一些我所见过的最美丽、最实用的网页应用程序。谁知道呢？也许你就是我的下一个成功故事！

继续编码，保持好奇心，最重要的是，享受其中的乐趣。直到下一次，祝你使用 Bootstrap 和 React 编程愉快！

Credits: Image by storyset

上一教程:
ReactJS - 动画
下一教程:
ReactJS - 地图