当前位置：文江博客话题详情

反应和引导最佳实践（我应该如何设计我的网站）

发布于 2025-02-07 13:14:12 字数 116 浏览 2 评论 0原文

我正在React创建我的第一个网站。我想使用Bootstrap的网格系统，但是我真的不知道何时应该使用它或更广泛。

网格系统在app.js和每个组件等地方是否最好？只是在每个组件中？只是在app.js中？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

丶情人眼里出诗心の 2025-02-14 13:14:12

我使用React-bootstrap。我发现与之相处非常简单，而您在VS代码中获得的Intellisense很棒。

首先，仅：

npm install react-bootstrap

您可以看到所有组件的列表在这里。

然后，您只需将要使用的组件添加到导入中即可。

import {
  Navbar,
  Container,
  Nav,
  NavbarBrand,
  Row,
  Col,
  {...}
} from "react-bootstrap";

然后在您的渲染输出中，例如：

return (
      <Container>
        <Navbar>
          <NavbarBrand>Brand</NavbarBrand>
          <Navbar.Collapse>
            <Nav>
              <NavItem>Item 1</NavItem>
            </Nav>
          </Navbar.Collapse>
        </Navbar>
        <Row>
          <Col md={4}>
          </Col>
          <Col md={4}>
          </Col>
          <Col md={4}>
          </Col>
        </Row>
      </Container>
    );

I use React-Bootstrap. I've found it very simple to get going with, and the intellisense you get in VS Code is great.

To get started, just:

npm install react-bootstrap

You can see a list of all of the components here.

Then you just add the components that you want to use to your import.

import {
  Navbar,
  Container,
  Nav,
  NavbarBrand,
  Row,
  Col,
  {...}
} from "react-bootstrap";

Then in your rendered output, for example:

return (
      <Container>
        <Navbar>
          <NavbarBrand>Brand</NavbarBrand>
          <Navbar.Collapse>
            <Nav>
              <NavItem>Item 1</NavItem>
            </Nav>
          </Navbar.Collapse>
        </Navbar>
        <Row>
          <Col md={4}>
          </Col>
          <Col md={4}>
          </Col>
          <Col md={4}>
          </Col>
        </Row>
      </Container>
    );

回复收藏 0 原文