时间戳

首页 > 解决方案 > 在反应中制作响应式菜单

reactjs - 在反应中制作响应式菜单

问题描述

我正在开发一个响应页面，当我在移动版本上看到它时，菜单组织都搞砸了。当我从 pc 版本更改为移动版本时，如何使菜单响应？

标签： reactjsredux

解决方案

Bootstrap通常用于在 Web 上构建响应式、移动优先的项目。React您可以通过以下方式在项目中使用引导程序： npm i --save bootstrap. 然后下载 Bootstrap 的依赖项：popper.js, 和JQuery. 下载完所有内容后，在您的 React 组件中，您可以使用className属性将适当的 Bootstrap 类分配给组成组件的语义元素。

然而话虽如此，也许更简单的方法是使用React-Bootstrap，因为它是“对 React 友好的引导程序版本”。直接来自 React-Bootstrap 的文档：

" React bootstrap 取代了 Bootstrap javascript。每个组件都是作为真正的 React 组件从头开始构建的，没有像 jQuery 这样的不必要的依赖项。它在构建时考虑到了兼容性，我们拥抱我们的 bootstrap 核心并努力与世界上最大的 UI 生态系统兼容。 "

这是一个示例navbar，直接来自他们的文档，当设备的屏幕尺寸发生变化时，它会根据需要堆叠：

<Navbar bg="light" expand="lg">
  <Navbar.Brand href="#home">React-Bootstrap</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>
      <NavDropdown title="Dropdown" id="basic-nav-dropdown">
        <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
        <NavDropdown.Divider />
        <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
      </NavDropdown>
    </Nav>
    <Form inline>
      <FormControl type="text" placeholder="Search" className="mr-sm-2" />
      <Button variant="outline-success">Search</Button>
    </Form>
  </Navbar.Collapse>
</Navbar>;

通过放大和最小化浏览器窗口来测试它，以查看菜单如何随着不同的屏幕尺寸堆叠和变化。

希望这会有所帮助！

推荐阅读