Bootstrap和React框架集成-编程入门课：Bootstrap从入门到实战

当前位置:　首页>> 技术小册>> 编程入门课：Bootstrap从入门到实战

Bootstrap 和 React 是两个广泛应用于 Web 前端开发的框架。Bootstrap 是一个流行的 CSS 框架，用于设计响应式的 Web 界面，而 React 是一个用于构建用户界面的 JavaScript 库，提供了高效的组件化开发方式。在许多 Web 项目中，开发者需要同时使用 Bootstrap 和 React，因此需要将两者集成起来。本章节将介绍如何在 React 项目中集成 Bootstrap，并提供相关的代码示例。

-----------------------

**集成 Bootstrap**
在 React 项目中集成 Bootstrap 可以通过以下两种方式实现：

**方式一：使用 CDN**
可以通过在 HTML 文件中引入 Bootstrap 的 CSS 和 JavaScript 文件来集成 Bootstrap。在 React 项目中，可以在 public/index.html 文件中添加以下代码：

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script
      src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
      integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
      integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
      integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
      crossorigin="anonymous"
    ></script>
  </body>
</html>
```

在 public/index.html 文件中添加上述代码后，就可以在 React 项目中使用 Bootstrap 的组件了。例如，在 src/App.js 文件中使用 Bootstrap 的 Container 和 Row 组件：

```
import React from "react";
import { Container, Row } from "react-bootstrap";

function App() {
  return (
    <Container>
      <Row>
        <h1>Hello, World!</h1>
      </Row>
    </Container>
  );
}

export default App;
```

**方式二：使用 npm 包**
另一种集成 Bootstrap 的方式是使用 npm 包管理器。可以通过 npm install react-bootstrap bootstrap命令安装 react-bootstrap 和 bootstrap 包。在 React 项目中使用 Bootstrap 的组件时，需要从 react-bootstrap 包中导入组件，并在代码中添加对 Bootstrap 样式的引用。例如，在 src/App.js 文件中使用 Bootstrap 的 Container 和 Row 组件：

```
import React from "react";
import { Container, Row } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

function App() {
  return (
    <Container>
      <Row>
        <h1>Hello, World!</h1>
      </Row>
    </Container>
  );
}

export default App;
```

在上述代码中，import "bootstrap/dist/css/bootstrap.min.css" 表示从 bootstrap 包中引入 Bootstrap 的样式表，使得 Bootstrap 的样式可以应用到 React 组件中。

**示例代码**
下面是一个完整的 React 项目，演示如何集成 Bootstrap 并使用 Bootstrap 的组件。该项目包含一个顶部导航栏和一个底部版权信息栏，中间是一个卡片，显示一张图片和一段文本。点击图片可以在新标签页中打开原图。在该项目中，使用了 React 的 useState 和 useEffect 钩子，用于管理组件状态和处理生命周期事件。

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />
    <title>React Bootstrap Example</title>
  </head>
  <body>
    <div id="root"></div>
    <script
      src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
      integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
      integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
      integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
      crossorigin="anonymous"
    ></script>
  </body>
</html>
```

```
import React, { useState, useEffect } from "react";
import { Navbar, Nav, Container, Card } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";

function App() {
  const [cardData, setCardData] = useState(null);

useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/photos/1")
      .then((response) => response.json())
      .then((data) => setCardData(data));
  }, []);

return (
    <div className="App">
      <Navbar bg="light" expand="lg">
        <Navbar.Brand href="#home">React Bootstrap Example</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="mr-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#link">Link</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
      <Container className="my-3">
        {cardData && (
          <Card>
            <a href={cardData.url} target="_blank" rel="noreferrer">
              <Card.Img variant="top" src={cardData.thumbnailUrl} />
            </a>
            <Card.Body>
              <Card.Title>{cardData.title}</Card.Title>
              <Card.Text>
                This is a sample card using React Bootstrap.
              </Card.Text>
            </Card.Body>
          </Card>
        )}
      </Container>
      <footer className="bg-light py-3 mt-5">
        <Container>
          <p className="text-muted text-center">
            &copy; {new Date().getFullYear()} React Bootstrap Example
          </p>
        </Container>
      </footer>
    </div>
  );
}

export default App;
```

在上述代码中，我们使用 useState 和 useEffect 钩子来管理组件的状态和生命周期事件。useState 钩子用于定义 cardData 状态变量，并将其初始化为 null。useEffect 钩子用于在组件挂载后，使用 fetch 方法从 https://jsonplaceholder.typicode.com/photos/1 地址获取数据，并将返回的数据设置为 cardData 的值。

在 render 方法中，我们使用了 Container 和 Card 组件来呈现一个卡片。卡片的数据来源是 cardData 状态变量，如果 cardData 的值不为 null，则呈现包含卡片图片、标题和文本的 Card 组件。点击卡片图片会在新标签页中打开原图。

底部版权信息栏使用了 Container 组件和 text-muted 类来呈现灰色的文本，使用 py-3 类来添加上下内边距，使用 mt-5 类来添加顶部外边距。

```
.App {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}
```

在上述代码中，我们定义了 .App 和 main 选择器的样式。.App 选择器用于设置 min-height 属性为 100vh，以确保整个应用程序至少占满一个屏幕高度，使用 display: flex 属性来使得子元素按照纵向排列，使用 flex-direction: column 属性来设置主轴方向为纵向。main 选择器用于使得 <main> 标签元素占满 .App 元素的剩余空间，以确保底部版权信息栏位于视图的底部。

**小结**
通过本章节，我们介绍了如何在 React 应用程序中集成 Bootstrap 框架，并通过一个简单的示例来演示了如何使用 React Bootstrap 组件来构建一个简单的卡片。我们了解了如何使用 npm 包管理器来安装 React Bootstrap 包，并将其导入到我们的项目中。我们还介绍了 React Bootstrap 的一些核心组件和样式类，如 Navbar、Container、Card、Nav 和 text-muted 等，并在代码示例中使用了它们。

通过集成 Bootstrap 框架，我们可以大大简化前端开发过程，快速构建美观、响应式的用户界面。由于 React Bootstrap 是基于 React 的，因此可以很容易地集成到 React 应用程序中，无论是创建一个新应用程序还是将其添加到现有应用程序中。同时，React Bootstrap 还提供了一系列丰富的文档和示例，使得开发人员可以轻松上手并使用这个框架来创建复杂的用户界面。

该分类下的相关小册推荐：

暂无相关推荐.