React Bootstrap 导航

React Bootstrap 支持 Nav 组件，为导航提供预自定义的布局。它与该组件共享一般的样式和布局。我们可以交换变体来更改导航的布局。

Nav 组件使用 flexbox 构建，以对齐导航项目并构建强大的基础。

让我们使用 Nav 组件创建一个基本导航

要使用 React Bootstrap 创建样式化的导航，请使用 <Nav></Nav> 组件并在 <Nav> 组件中定义 <Nav.Item>。

考虑下面的示例

App.js

输出

<Nav> 组件提供了一个非常灵活的容器来对齐导航项目。它可以通过使用自定义类进行自定义，因此我们可以使用任何元素来构建导航。默认情况下，<Nav> 和 <Nav.Item> 组件呈现 <div> 而不是 <ul> 和 <li>，这不是一个好的标记实践，因此我们可以使用 as 属性将其呈现为 <ul> 和 <li>。

上面的代码会将导航链接呈现为 <ul> 和 <li> 元素。它不会影响呈现的链接的布局。

导航链接的对齐方式和方向

Nav 组件是使用 flexbox 构建的，因此我们可以通过添加一些类轻松自定义其方向和对齐方式。例如，如果我们想将其对齐到中心，我们可以简单地传递 className="justify-content-center"，它会将导航菜单对齐到导航容器的中心。类似地，要将其定位在容器的末尾，我们可以使用 justify-content-end 类。默认情况下，它位于导航容器的开头。

下面是一个居中导航的例子

输出

垂直导航

要垂直对齐导航项目，我们可以使用 flex-column 类。它将垂直对齐导航项目。

使用 Nav 的标签页

我们可以使用 tabs 变体将导航菜单创建为标签页。它会将样式应用于标签页项目，并以标签页样式的布局呈现它们。考虑下面的例子

输出

作为药丸的导航项目

pill 变体允许我们以药丸布局呈现导航项目。它提供了改进的视觉布局。

输出

填充和对齐导航

fill 属性允许我们填充和对齐导航项目。fill 属性强制导航项目扩展到整个宽度。然而，导航项目的大小不同。我们可以使用 fill 属性将导航项目的宽度设置为容器的整个宽度。为了在项目之间平均分配空间，我们可以将 justify 属性传递给 nav 组件。

输出

导航下拉菜单

我们可以将下拉菜单组件与导航链接和导航项目混合，以创建下拉菜单。

输出

因此，我们可以精确地使用 nav 组件来创建具有预自定义布局的导航菜单。我们还可以通过将下拉菜单组件与导航项目混合来创建下拉菜单。