Question

我在我的React项目上使用react-bootstrap。但是我想学习这个框架的所有功能。我的意思是，我看到了react-bootstrap支持的一些页面。甚至，我下载了页面模板。但是我不知道用法。您是否有任何相关文档？或关于如何从模板了解用法的任何建议？简而言之，我可以将Navbar与基本命令结合使用。但是我看到一些带有图像的导航栏。我怎样才能做到这一点？或者如何调整大小？

我的代码基本上就是这样；

<Navbar  bg="dark" variant="dark">
   <Navbar.Brand href="#home">Navbar</Navbar.Brand>
   <Nav className="mr-auto">
      <Nav.Link href="#home">Homee</Nav.Link>
      <Nav.Link href="#features">Features</Nav.Link>
      <Nav.Link href="#pricing">Pricing</Nav.Link>
   </Nav>
   <Form inline>
      <FormControl type="text" placeholder="Search" className="mr-sm-2" />
      <Button variant="outline-info">Search</Button>
   </Form>
</Navbar>

我想澄清一下自己。我知道redux的后端，但是我不觉得自己在前端。导航栏只是一个例子。我需要拥有所有可控机会的文档。

Answer 1

以下是的官方文档 React Bootstrap - Navbars

例如带有图像的导航栏；

  <Navbar bg="light">
    <Navbar.Brand href="#home">Brand link</Navbar.Brand>
  </Navbar>
  <br />
  <Navbar bg="light">
    <Navbar.Brand>Brand text</Navbar.Brand>
  </Navbar>
  <br />
  <Navbar bg="dark">
    <Navbar.Brand href="#home">
      <img
        src="/logo.svg"
        width="30"
        height="30"
        className="d-inline-block align-top"
        alt="React Bootstrap logo"
      />
    </Navbar.Brand>
  </Navbar>
  <br />
  <Navbar bg="dark" variant="dark">
    <Navbar.Brand href="#home">
      <img
        alt=""
        src="/logo.svg"
        width="30"
        height="30"
        className="d-inline-block align-top"
      />{' '}
      React Bootstrap
    </Navbar.Brand>
  </Navbar>

All navbar props

在react-bootstrap中编辑Navbar或其他组件

1 个答案: