在 react-bootstrap 中编辑导航栏或其他组件答案

【问题标题】：Editing Navbar or other components in react-bootstrap在 react-bootstrap 中编辑导航栏或其他组件
【发布时间】：2020-03-17 02:32:31
【问题描述】：

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

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

<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 的后端，但我觉得自己在前端还不够。导航栏就是一个例子。我需要一份拥有所有可管理机会的文档。

【问题讨论】：

非常笼统的问题。在学习 react-bootstrap 之前，需要先学习 props 和 redux。当您学习这些主题时，它会更容易。
@MehmetDemiray 我知道后端方面，比如 props redux hooks 等。但问题是，我在前端还不够。这就是为什么我想了解 react-bootstrap 的详细信息。
如果模板是用react-bootstrap做成的，那么通过查看react-bootstrap提供的模板代码和文档，你就很容易明白了。
您可以获取文档here
@MehmetDemiray 我真的没有在你的建议中得到对 redux 的引用。 Redux 与 react-bootstrap 没有任何关系

标签： reactjs bootstrap-4 react-bootstrap

【解决方案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

【讨论】：

我看到了这个。但它不是带图像的导航栏。它只是添加徽标。喜欢这个网站的 stackoverflow 标志。