React Bootstrap 导航栏

React Bootstrap Navbar 组件支持强大的、响应式的导航头部。 Bootstrap Navbar 支持品牌和导航的定位等等。

Navbar 是一个灵活的容器，具有 100% 的宽度。 我们可以使用可选的容器或边距来定制水平宽度。 也可以使用尺寸和弹性实用程序来更精确地定位 Navbar 内容。

让我们了解如何使用 React Bootstrap 中的 Navbar 组件

如何使用 React Bootstrap 创建导航栏？

React Bootstrap 支持 <Navbar />, <Navbar.Brands />, <Navbar.Toggle />, <Navbar.Brands />, 和 <Navbar.Collapse /> 组件来定位一个 Nav 菜单。

要使用 Navbar 组件，请按如下方式导入它

在开始之前，让我们了解 Navbar 组件中支持的 props 及其用法

Navbar 中的 Props

React Bootstrap 为 < Navbar> 组件支持以下 props

NavBar Props

as: as prop 是 React Bootstrap 中的一个常见 prop，它允许以不同类型的元素渲染元素。

bg: bg prop 允许在 Navbar 组件中应用 bg-* 实用程序。

collapseOnSelect: 它用于在使用子 <nav> 元素上指定的 onSelect 函数单击时折叠 Navbar。

expand: expand prop 用于指定一个断点，低于该断点我们的 Navbar 将折叠。

expanded: expanded prop 控制导航栏主体的可见性。

fixed: fixed prop 用于在特定位置创建固定导航栏。

onSelect: onSelect prop 用作回调，当选择子 <nav> 的后代时触发。

onToggle: onToggle prop 用作回调函数，当 <Navbar> 主体折叠或展开时触发。

role: role prop 指定 Navbar 的 ARIA 角色。

sticky: sticky prop 用于指定视口顶部的 sticky 位置。

variant: variant prop 用于应用 Navbar 的视觉变体。

Navbar.Brand Props

as: as prop 是 React Bootstrap 中的一个常见 prop，它允许以不同类型的元素渲染元素。

href: href prop 用于传递导航的 href 属性。

Navbar.Toggle Props

as: as prop 是 React Bootstrap 中的一个常见 prop，它允许以不同类型的元素渲染元素。

children: children prop 用于定义切换内容。

label: label prop 用于切换器按钮； 它为组件指定一个可访问的 ARIA 标签。

onClick: 它用作触发 click 事件的回调函数。

让我们了解一些 React Bootstrap Navbar 组件的示例

React Bootstrap Navbar 示例

以下是 Navbar 组件的几个示例

基本示例

App.js

输出

从上面的输出中，我们可以看到一个正确对齐的导航栏已渲染到我们的浏览器。

我们已指定 expand="md"> 因此它将在中等视口上折叠。

切换按钮将显示和隐藏导航栏菜单。

Navbar 品牌

Navbar 品牌允许我们添加品牌徽标或文本。 我们可以通过为外部样式表或内联样式指定类名来传递品牌图像的任何样式。

考虑下面的示例

App.js

输出

Navbar 位置

我们可以使用 Bootstraps 定位实用程序在特定位置定位和对齐 Navbar。 我们可以将 fixed 和 sticky props 与不同的位置值（如 top 和 bottom）一起使用，以将 Navbar 固定在顶部或底部，或使其在特定位置保持粘性。

Position fixed 会将 Navbar 固定到指定位置，并且它将与其他元素分离。 我们必须为下面的元素提供 padding-top 以防止它重叠。 sticky 位置会使其在滚动时保持粘性，但某些浏览器不支持 sticky 位置。

考虑下面的示例

App.js

输出

从上面的输出中，我们将 Navbar 放置在顶部并固定了位置，因此我们必须为下面的标题组件提供 margin-top。

滚动行为

navbarScroll prop 用于在折叠导航栏的可切换内容中启用垂直滚动。

要启用垂直滚动，请在 Nav 组件中指定 navbarScroll prop，并在 Navbar.Toggle 组件中指定 aria-controls="navbarScroll"。

考虑下面的示例

上面的示例将在折叠导航栏的可切换内容中启用垂直滚动。

响应式导航栏

我们可以控制 Navbar 组件在不同视口上的行为。 要控制可切换的 Navbar，请使用 expand prop、Navbar.Toggle 和 Navbar.Collapse 组件。 我们还可以设置 defaultExapanded prop 以默认在展开模式下渲染 Navbar。

我们还可以设置 collpaseOnSelect 以在单击项目时自动折叠 Navbar。 我们可以使用 expanded 和 onToggle props 来完美控制 Navbar 的折叠行为。

考虑下面的示例

App.js

输出

Offcanvas Navbar (Navbar 侧边栏)

我们可以使用 offcanvas 组件将我们的扩展和折叠 Navbar 转换为 offcanvas 抽屉。 要创建一个始终在所有视口上折叠的 offcanvas，我们必须使用 offcanvas 组件并将 expand prop 设置为 false。

我们可以扩展 offcanvas 样式和 expand prop 以渲染动态和灵活的导航栏侧边栏。

考虑下面的示例

App.js

输出

上面的示例将渲染完全折叠的 Navbar。

当我们单击切换按钮时，它将从右侧打开侧边栏。

Navbar 的高度将是完整的窗口高度。 我们可以通过单击关闭图标来关闭它。

因此，我们可以精确地使用 Navbar 组件来创建具有各种切换和放置选项的不同导航菜单。