一、使用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