使用Bootstrap 和React进行项目的开发

一、使用React安装BootStrap的不同方式

在本节中，我们将探索将引导程序添加到 reactjs 项目的不同方法

我使用 CDN

将引导程序添加到反应项目的最简单方法之一是使用 cdn

要使用 CDN 添加引导程序，请复制 CDN url 并'public/index.html'在 Reactjs 项目中打开文件

通过 CDN 添加引导程序有一些缺点，比如

不允许基于组件的引导元素使用
它不像其他方法那样无缝
由于未使用的类仍被添加到项目中，导致膨胀

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

和js

https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js

ii 使用 npm 或 yarn

您可以轻松地将 bootstrap 添加到您的 react js 项目中，使用npm或yarn安装并将其导入到您的'src/index.js'文件中

npm install bootstrap

然后在你的'src/index.js'添加以下内容

import 'bootstrap/dist/css/bootstrap.min.css';

iii 使用 React Bootstrap

React bootstrap 是一个从头开始为 bootstrap 构建的 bootstrap 版本

React Bootstrap 允许您将 bootstrap 用作 React 组件，因此它是一种使用 bootstrap 的反应友好方式

npm install react-bootstrap bootstrap

然后将其导入您的文件中'src/index.js'

import 'bootstrap/dist/css/bootstrap.min.css';

并在您的组件文件中导入您需要的特定 React Bootstrap 组件

import Button from 'react-bootstrap/Button';

iV 使用 Reactstrap

Reactstrap 是一个提供可在 React 应用程序中使用的引导程序组件的库

您可以使用 npm 轻松安装 reactstrap

npm install --save reactstrap react react-dom

并在您的组件文件中导入 Reactstrap 引导组件，例如

import {Button} from 'reactstrap';

2. 使用带有 Bootstrap 和 React 的示例项目

让我们用 bootstrap 创建一个示例项目并做出反应。

A。设置环境

我们需要在机器上安装 npm 和 node js。然后使用 npx create-next-app 或任何其他 react 驱动的框架创建一个 react 应用程序，然后 cd 到你的项目文件夹名称项目文件夹 sample-react-bootstrap app

npx create-next-app

b. 将 bootstrap 导入您的 React 应用程序

创建 React 应用程序后，您可以在“src/index.js”文件中导入 bootstrap css

import 'bootstrap/dist/css/bootstrap.min.css';

C。在您的 React 应用程序中使用引导程序组件

React bootstrap 提供了各种组件，如按钮、表单等，要使用这些组件，只需将它们导入到您的组件中，就像这样

在你的'src/App.js'

import React from 'react';
import Button from 'react-bootstrap/Button';

function App() {
  return (
    <div className="App">
      <Button variant="primary">Reload</Button>
    </div>
  );
}

export default App;

在上面的示例中，我们导入了按钮组件，然后在 App 组件中使用该组件

d. 自定义引导程序

Bootstrap 组件最简单和最强大的功能之一是它们能够自定义

每个 bootstrap 组件都是由像 Button 这样的小组件组成的，因此可以很容易地根据你的需要定制它

import React from 'react';
import Button from 'react-bootstrap/Button';

function App() {
  const AppStyleButton = {
    backgroundColor: 'blue',
    margin: '10px 10px'
  };

  return (
    <div className="App">
      <Button style={AppStyleButton}>Reload</Button>
    </div>
  );
}

export default App;

e. 使用 Bootstrap 网格系统构建响应式设计

Bootstrap 的网格系统允许灵活和响应式布局。

这就是你如何在 react-bootstrap 中使用网格系统

import React from 'react';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

function App() {
  return (
    <Container>
      <Row>
        <Col xs={12} md={9}>
          <div className="content">Main Content Area</div>
        </Col>
        <Col xs={6} md={3}>
          <div className="sidebar">Sidebar area</div>
        </Col>
      </Row>
    </Container>
  );
}

export default App;

在此示例中，我们可以使用 ‘Container’ 、 ‘Row’ 和 ‘Col’ 组件创建响应式布局

我们已将 xs（超小）屏幕尺寸分配给主要内容 (12)，并在区域为中等大小或更大时分配主要内容和侧边栏

3. 使用 BootStrap 的不同示例和独特用例

在本节中，我们将查看将 bootstrap 与 React 结合使用的不同示例

示例 1：模态

在这个例子中，我们将创建一个带有 bootstrap 和 react 的模态，我们将使用 react hooks 来控制模态的可见性

考虑以下代码：

index.js 文件：

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "bootstrap/dist/css/bootstrap.min.css";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

App.js文件：

import React, { useState } from "react";
import { Button, Modal } from "react-bootstrap";

export default function Example() {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        Make modal visible
      </Button>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Title of the Modal </Modal.Title>
        </Modal.Header>
        <Modal.Body>Text inside of a Modal </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            close the modal
          </Button>
          <Button variant="primary" onClick={handleClose}>
            Save
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

因此，在这个例子中，我们用 bootstrap 和 reactjs 制作了一个模态

让我们看另一个例子，带有引导程序的导航栏和反应

示例 2：具有反应和引导程序的导航栏

导航栏是网站中常见的设计功能，需要跨设备响应。在此示例中，我们将使用 React 和 Bootstrap 构建响应式导航栏

考虑以下代码：

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

export default function Example() {
  return (
    <Navbar bg="light" expand="lg">
      <Navbar.Brand href="#home">React-Bootstrap Nav Bar</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="#about">about</Nav.Link>
          <NavDropdown title="list of services" id="basic-nav-dropdown">
            <NavDropdown.Item href="#action/3.1">Some service</NavDropdown.Item>
            <NavDropdown.Item href="#action/3.2">
              Some other service
            </NavDropdown.Item>
            <NavDropdown.Item href="#action/3.3">
              some service we offer
            </NavDropdown.Item>
            <NavDropdown.Divider />
          </NavDropdown>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  );
}

并在 index.js 文件中添加 css 文件，例如

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "bootstrap/dist/css/bootstrap.min.css";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

因此，在此示例中，我们学习了如何使用 React bootstrap 创建导航栏

让我们考虑最后一个例子：

示例 3：使用 BootStrap 形成并做出反应。

在这个例子中，我们将创建一个带有 bootstrap 和 React 的表单。

让我们考虑下面的代码

import React, { useState } from "react";
import { Form, Button } from "react-bootstrap";

export default function Example() {
  const [validated, setValidated] = useState(false);

  const handleSubmit = (event) => {
    const form = event.currentTarget;
    if (form.checkValidity() === false) {
      event.preventDefault();
      event.stopPropagation();
    }
    setValidated(true);
  };

  return (
    <Form noValidate validated={validated} onSubmit={handleSubmit}>
      <Form.Group controlId="validationCustom01">
        <Form.Label> what is your Name</Form.Label>
        <Form.Control required type="text" placeholder="What is your Name" />
        <Form.Control.Feedback type="invalid">
          Please provide your name
        </Form.Control.Feedback>
      </Form.Group>
      <Button type="submit">Send the form</Button>
    </Form>
  );
}

并在 index.js 文件中添加 css

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "bootstrap/dist/css/bootstrap.min.css";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

4. 如果使用 React 的 Bootstrap 不工作，如何排除故障

如果 Bootstrap 在您的 React JS 项目中不起作用，您可以通过以下一些方法进行故障排除

Bootstrap CSS 未导入： 您需要在您的 'index.js'文件中导入 bootstrap css，例如

import 'bootstrap/dist/css/bootstrap.min.css';

2.不正确的安装：确保你已经在应用程序中正确安装了 Bootstrap 或 react-bootstrap。你可以直接通过 CDN 添加 Bootstrap 或者 npm install 也可以

3.使用组件而不导入它们：

使用时检查是否正确导入了组件。您需要在使用它们之前导入组件，例如我们在组件中使用之前导入一个 Button 组件

import Button from 'react-bootstrap/Button';

<Button variant="secondary" onClick={handleClose}>
    close the modal
</Button>

您还可以使用 console.log 和 react 开发工具调试 bootstrap 无法工作的原因，并检查库是否已成功安装

5.结论

将 Bootstrap 与 React 集成既简单又强大，可帮助您设计应用程序和网页

在本文中，我们讨论了多种将 Bootstrap 与 React js 集成的方式，包括通过 CDN 添加 Bootstrap、通过 npm 安装 Bootstrap 等方式

然后我们使用 React js 和 Bootstrap 创建了一个示例应用程序，并了解了如何将 Bootstrap 添加到 React js 项目中

之后，我们考虑了三个将 Bootstrap 与 reactjs 结合使用的示例，示例 1 我们使用 react js 和 Bootstrap 构建了一个 Modal，在示例 2 中，我们使用 reactjs 和 Bootstrap 构建了一个下拉列表，在示例 3 中，我们使用 react js 和 Bootstrap 构建了表单

最后，我们了解了当 Bootstrap 无法与 React JS 一起工作时如何解决问题

感谢您阅读这篇文章。

原文链接：https://juejin.cn/post/7246007934042538041 作者：happyEnding