使用react和引导。

我们现有的使用Bootstrap时采用了CDN。然而，使用React的方法有些不同。我想要逐一学习。

首先生成一个React项目。在链接的底部可以找到相关信息。生成项目的方法。

1. 安装 react bootstrap

大致就是这样的吧。

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

function App() {
  return (
    <div className="App">
    </div>
  );
}

2. 让我们使用按钮吧。

将寻找的按钮粘贴到app.js中。

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

import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import Button from 'react-bootstrap/Button';

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

仔细阅读文件后，就知道应该导入哪一个。

通常情况下是使用大写标签。

2. 导航栏

这是Bootstrap的导航栏代码。

import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';


<Navbar bg="dark" data-bs-theme="dark">
        <Container>
          <Navbar.Brand href="#home">Navbar</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#features">Features</Nav.Link>
            <Nav.Link href="#pricing">Pricing</Nav.Link>
        </Nav>
    </Container>
</Navbar>

在这么多论点（impot）出现的时候，我们可以一起写作。

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

以上就是。