is a responsive wrapper that positions branding, navigation, and other elements into a concise header. It's easily extensible and thanks to the component.">is a responsive wrapper that positions branding, navigation, and other elements into a concise header. It's easily extensible and thanks to the component.">
报告问题编辑此页面

导航栏

组件 <b-navbar> 是一个包装器，将品牌、导航和其他元素定位到一个简洁的标题中。它很容易扩展，并且由于 <b-collapse> 组件，它可以轻松地集成响应行为。

示例

<div>
  <b-navbar toggleable="lg" type="dark" variant="info">
    <b-navbar-brand href="#">NavBar</b-navbar-brand>

    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav>
        <b-nav-item href="#">Link</b-nav-item>
        <b-nav-item href="#" disabled>Disabled</b-nav-item>
      </b-navbar-nav>

      <!-- Right aligned nav items -->
      <b-navbar-nav class="ml-auto">
        <b-nav-form>
          <b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
          <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
        </b-nav-form>

        <b-nav-item-dropdown text="Lang" right>
          <b-dropdown-item href="#">EN</b-dropdown-item>
          <b-dropdown-item href="#">ES</b-dropdown-item>
          <b-dropdown-item href="#">RU</b-dropdown-item>
          <b-dropdown-item href="#">FA</b-dropdown-item>
        </b-nav-item-dropdown>

        <b-nav-item-dropdown right>
          <!-- Using 'button-content' slot -->
          <template #button-content>
            <em>User</em>
          </template>
          <b-dropdown-item href="#">Profile</b-dropdown-item>
          <b-dropdown-item href="#">Sign Out</b-dropdown-item>
        </b-nav-item-dropdown>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</div>

<!-- b-navbar.vue -->

配色方案

<b-navbar> 支持标准 Bootstrap v4 可用的背景颜色变体。将 variant 属性设置为以下值之一以更改背景颜色：primary、success、info、warning、danger、dark 或 light。

通过将 type 属性设置为 light 以用于浅色背景颜色变体，或 dark 以用于深色背景颜色变体，来控制文本颜色。

放置

通过设置两个属性中的一个来控制导航栏的放置

属性 类型 默认值 描述
fixed 字符串 null 设置为 top 以固定到视口的顶部，或设置为 bottom 以固定到视口的 bottom。
sticky 布尔值 false 设置为 true 以使导航栏粘贴到视口的顶部（或具有 position: relative 设置的父容器）时滚动。

备注

  • 固定定位使用 CSS position: fixed。您可能需要调整文档顶部/底部填充或边距。
  • CSS position: sticky（用于 sticky）并非在所有浏览器中都得到完全支持。对于不支持 position: sticky 的浏览器，它将本机回退到 position: relative。

支持的内容

导航栏内置支持少数子组件。根据需要从以下内容中进行选择

  • <b-navbar-brand> 用于您的公司、产品或项目名称。
  • <b-navbar-toggle> 用于 <b-collapse is-nav> 组件。
  • <b-collapse is-nav> 用于按父断点对导航栏内容进行分组和隐藏。
  • <b-navbar-nav> 用于全高且轻量级的导航（包括对下拉菜单的支持）。以下子组件在 <b-navbar-nav> 中受支持
    • <b-nav-item> 用于链接（和路由器链接）操作项
    • <b-nav-item-dropdown> 用于导航下拉菜单
    • <b-nav-text> 用于添加垂直居中的文本字符串。
    • <b-nav-form> 用于任何表单控件和操作。

<b-navbar-brand>

如果提供了 href，<b-navbar-brand> 会生成一个链接，如果提供了 to，则会生成一个 <router-link>。如果两者都没有提供，它将呈现为 <div> 标签。您可以通过将 tag 属性设置为您希望呈现的元素来覆盖标签类型

<div>
  <!-- As a link -->
  <b-navbar variant="faded" type="light">
    <b-navbar-brand href="#">BootstrapVue</b-navbar-brand>
  </b-navbar>
</div>

<!-- b-navbar-brand-link.vue -->
<div>
  <!-- As a heading -->
  <b-navbar variant="faded" type="light">
    <b-navbar-brand tag="h1" class="mb-0">BootstrapVue</b-navbar-brand>
  </b-navbar>
</div>

<!-- b-navbar-brand-heading.vue -->

将图像添加到 <b-navbar-brand> 可能总是需要自定义样式或实用程序才能正确调整大小。以下是一些演示示例

<div>
  <!-- Just an image -->
  <b-navbar variant="faded" type="light">
    <b-navbar-brand href="#">
      <img src="https://placekitten.com/g/30/30" alt="Kitten">
    </b-navbar-brand>
  </b-navbar>
</div>

<!-- b-navbar-brand-image.vue -->
<div>
  <!-- Image and text -->
  <b-navbar variant="faded" type="light">
    <b-navbar-brand href="#">
      <img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="Kitten">
      BootstrapVue
    </b-navbar-brand>
  </b-navbar>
</div>

<!-- b-navbar-brand-image-and-text.vue -->

<b-navbar-nav>

导航栏导航链接建立在 <b-navbar-nav> 父组件的基础上，需要使用 <b-collapse is-nav> 和 <b-nav-toggle> 切换器才能实现正确的响应式样式。导航栏中的导航也会增长到占据尽可能多的水平空间，以确保您的导航栏内容安全对齐。

<b-navbar-nav> 支持以下子组件

  • <b-nav-item> 用于链接（和路由器链接）操作项
  • <b-nav-text> 用于添加垂直居中的文本字符串。
  • <b-nav-item-dropdown> 用于导航栏下拉菜单
  • <b-nav-form> 用于向导航栏添加简单的表单。

<b-nav-item>

<b-nav-item> 是主要链接（和 <router-link>）组件。提供 to 属性值将生成 <router-link>，而提供 href 属性值将生成标准链接。

设置 <b-nav-item> active 属性将突出显示该项目为活动页面，通过将属性 disabled 设置为 true 来禁用 <b-nav-item>。

通过为 <b-nav-item> 上的 @click 事件指定一个处理程序来处理点击事件。

<b-nav-text>

借助 <b-nav-text>，导航栏可以包含文本片段。此组件调整文本字符串的垂直对齐方式和水平间距。

<div>
  <b-navbar toggleable="sm" type="light" variant="light">
    <b-navbar-toggle target="nav-text-collapse"></b-navbar-toggle>

    <b-navbar-brand>BootstrapVue</b-navbar-brand>

    <b-collapse id="nav-text-collapse" is-nav>
      <b-navbar-nav>
        <b-nav-text>Navbar text</b-nav-text>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</div>

<!-- b-navbar-text.vue -->

<b-nav-item-dropdown>

有关 <b-nav-item-dropdown> 用法，请参阅 <b-dropdown> 文档。请注意，<b-navbar> 和 <b-navbar-nav> 不支持拆分下拉菜单。

<div>
  <b-navbar type="dark" variant="dark">
    <b-navbar-nav>
      <b-nav-item href="#">Home</b-nav-item>

      <!-- Navbar dropdowns -->
      <b-nav-item-dropdown text="Lang" right>
        <b-dropdown-item href="#">EN</b-dropdown-item>
        <b-dropdown-item href="#">ES</b-dropdown-item>
        <b-dropdown-item href="#">RU</b-dropdown-item>
        <b-dropdown-item href="#">FA</b-dropdown-item>
      </b-nav-item-dropdown>

      <b-nav-item-dropdown text="User" right>
        <b-dropdown-item href="#">Account</b-dropdown-item>
        <b-dropdown-item href="#">Settings</b-dropdown-item>
      </b-nav-item-dropdown>
    </b-navbar-nav>
  </b-navbar>
</div>

<!-- b-navbar-dropdown.vue -->

<b-nav-form>

使用 <b-nav-form> 将内联表单控件置于导航栏中

<div>
  <b-navbar type="light" variant="light">
    <b-nav-form>
      <b-form-input class="mr-sm-2" placeholder="Search"></b-form-input>
      <b-button variant="outline-success" class="my-2 my-sm-0" type="submit">Search</b-button>
    </b-nav-form>
  </b-navbar>
</div>

<!-- b-navbar-form.vue -->

输入组同样适用

<div>
  <b-navbar type="light" variant="light">
    <b-nav-form>
      <b-input-group prepend="@">
        <b-form-input placeholder="Username"></b-form-input>
      </b-input-group>
    </b-nav-form>
  </b-navbar>
</div>

<!-- b-navbar-form-inputs.vue -->

<b-navbar-toggle> 和 <b-collapse is-nav>

导航栏默认情况下没有响应能力，但你可以轻松修改它们以改变这一点。响应行为取决于我们的 <b-collapse> 组件。

将 <b-navbar-nav> 组件包装在 <b-collapse is-nav> 中（记住设置 is-nav 属性！）以指定将根据特定断点折叠的内容。在 <b-collapse> 上分配一个文档唯一的 id 值。

使用 <b-navbar-toggle> 组件控制折叠组件，并将 <b-navbar-toggle> 的 target 属性设置为 <b-collapse> 的 id。

在 <b-navbar> 上将 toggleable 属性设置为希望内容自动展开的所需断点。可能的 toggleable 值为 sm、md、lg 和 xl。将 toggleable 设置为 true（或空字符串）会将导航栏设置为始终折叠，而将其设置为 false（默认值）将禁用折叠（始终展开）。

<b-navbar-toggle> 组件默认左对齐，但如果它们跟随 <b-navbar-brand> 等同级元素，它们将自动右对齐。反转标记将反转切换器的放置。

请参阅本页上的第一个示例以供参考，还请参阅 <b-collapse> 了解折叠组件的详细信息。

除了用于控制折叠之外，<b-navbar-toggle> 还可用于切换 <b-sidebar> 组件的可见性。只需通过 target 属性指定 <b-sidebar> 的 ID。

在内部，<b-navbar-toggle> 使用 v-b-toggle 指令。

自定义导航栏切换

<b-navbar-toggle> 渲染默认的 Bootstrap v4 汉堡（这是一个背景 SVG 图像）。您可以通过可选范围 default 插槽提供您自己的内容（例如图标）。默认插槽范围包含属性 expanded，当折叠展开时它将为 true，当折叠收起时它将为 false。

请注意，expanded 范围属性仅在将 target 属性提供为 string（而不是 array）时才起作用。

<template>
  <b-navbar toggleable type="dark" variant="dark">
    <b-navbar-brand href="#">NavBar</b-navbar-brand>

    <b-navbar-toggle target="navbar-toggle-collapse">
      <template #default="{ expanded }">
        <b-icon v-if="expanded" icon="chevron-bar-up"></b-icon>
        <b-icon v-else icon="chevron-bar-down"></b-icon>
      </template>
    </b-navbar-toggle>

    <b-collapse id="navbar-toggle-collapse" is-nav>
      <b-navbar-nav class="ml-auto">
        <b-nav-item href="#">Link 1</b-nav-item>
        <b-nav-item href="#">Link 2</b-nav-item>
        <b-nav-item href="#" disabled>Disabled</b-nav-item>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</template>
<!-- b-navbar-toggle-slot.vue -->

打印

默认情况下，导航栏在打印时隐藏。通过设置 print 属性强制打印它们。

另请参阅

有关路由器链接特定属性，请参阅路由器支持参考页面。

组件参考

<b-navbar>

查看源代码

属性

所有属性默认值均可全局配置。

属性
类型
默认值
说明
fixed
字符串设置为“top”可固定在视口的顶部，或设置为“bottom”可固定在视口的底部
打印
布尔值false默认情况下，打印时会隐藏导航栏。设置此属性后，将打印该属性
sticky
布尔值false设置为 true 可使导航栏在滚动时粘贴到视口顶部（或设置了“position: relative”的父容器）
标签
字符串'nav'指定要呈现的 HTML 标签，而不是默认标签
可切换
布尔值或字符串false设置为“true”表示始终折叠导航栏，或设置为特定断点，此时导航栏将展开：“sm”、“md”、“lg”或“xl”
类型
字符串'light'通过将文本颜色设置为“light”来使用浅色背景颜色变体，或将文本颜色设置为“dark”来使用深色背景颜色变体，从而控制文本颜色
变体
字符串将 Bootstrap 主题颜色变体之一应用于组件

插槽

名称
说明
默认值 要放置在导航栏中的内容

<b-navbar-nav>

功能组件
查看源代码

属性

所有属性默认值均可全局配置。

属性
类型
默认值
说明
对齐
字符串在导航中对齐导航项：“start”（或“left”）、“center”、“end”（或“right”）
填充
布尔值false使用导航项按比例填充所有水平空间。所有水平空间都被占用，但并非每个导航项都具有相同的宽度
对齐
布尔值false使用导航项填充所有水平空间，但与“填充”不同，每个导航项的宽度都相同
小
布尔值false使导航变小
标签
字符串'ul'指定要呈现的 HTML 标签，而不是默认标签

插槽

名称
说明
默认值 要放置在导航栏导航中的内容

<b-navbar-brand>

功能组件
查看源代码

属性

所有属性默认值均可全局配置。

属性
(点击按升序排列)
类型
(点击按升序排列)
默认值
说明
active
布尔值false设置为 `true` 时，使用活动样式将组件置于活动状态
active-class
字符串<router-link> 属性：在链接处于活动状态时应用的活动 CSS 类。通常，您会希望将其设置为类名“active”
append
布尔值false<router-link> 属性：设置 append 属性始终将相对路径附加到当前路径
disabled
布尔值false设置为 `true` 时，禁用组件的功能并将其置于禁用状态
exact
布尔值false<router-link> 属性：默认活动类匹配行为是包含匹配。设置此属性会强制模式与路由完全匹配
exact-active-class
字符串<router-link> 属性：配置在链接处于活动状态且完全匹配时应用的活动 CSS 类。通常，您会希望将其设置为类名“active”
exact-path
布尔值false<router-link> 属性：仅允许使用 URL 的路径部分进行匹配，有效地忽略查询和哈希部分
exact-path-active-class
字符串<router-link> 属性：配置在链接处于活动状态且路径完全匹配时应用的活动 CSS 类。通常，您会希望将其设置为类名“active”
href
字符串<b-link> 属性：表示标准 a 链接的目标 URL
no-prefetch
布尔值false<nuxt-link> 属性：为了提高 Nuxt.js 应用程序的响应能力，当链接将在视口中显示时，Nuxt.js 将自动预取代码拆分的页面。为特定链接设置 `no-prefetch` 将禁用此功能
prefetch
v2.15.0+ 		布尔值null<nuxt-link> 属性：为了提高 Nuxt.js 应用程序的响应能力，当链接将在视口中显示时，Nuxt.js 将自动预取代码拆分的页面。将 `prefetch` 设置为 `true` 或 `false` 将覆盖 `router.prefetchLinks` 的默认值
rel
字符串null<b-link> prop：设置呈现的链接上的 `rel` 属性
替换
布尔值false<router-link> prop：设置 replace prop 将在点击时调用 `router.replace()` 而不是 `router.push()`，因此导航不会留下历史记录
router-component-name
v2.15.0+ 		字符串<b-link> prop：BootstrapVue 自动检测 `<router-link>` 和 `<nuxt-link>` 之间。在您希望使用基于 `<router-link>` 的第三方链接组件时，将此 prop 设置为组件名称。例如，如果您使用 Gridsome，则将其设置为 'g-link'（注意，仅将 `<router-link>` 特定的 prop 传递给组件）
标签
字符串'div'指定要呈现的 HTML 标签，而不是默认标签
target
字符串'_self'<b-link> prop：设置呈现的链接上的 `target` 属性
to
Object 或 String<router-link> prop：表示链接的目标路由。点击时，to prop 的值将内部传递给 `router.push()`，因此该值可以是字符串或 Location 描述符对象

<b-navbar-brand> 支持生成 <router-link> 或 <nuxt-link> 组件（如果使用 Nuxt.js）。有关路由链接（或 nuxt 链接）特定 prop 的更多详细信息，请参阅 路由支持 参考部分。

插槽

名称
说明
默认值 要放置在导航栏品牌中的内容

<b-navbar-toggle>

查看源代码

组件别名

<b-navbar-toggle> 还可以通过以下别名使用

  • <b-nav-toggle>

注意：仅在导入所有 BootstrapVue 或使用组件组插件时才可以使用组件别名。

属性

所有属性默认值均可全局配置。

属性
类型
默认值
说明
disabled
v2.15.0+ 		布尔值false当为 `true` 时，禁用导航栏切换按钮，并将类 `disabled` 添加到按钮
label
字符串'切换导航'要放在切换的 'aria-label' 属性中的字符串
target
必需 		数组 或 字符串应切换的折叠/侧边栏组件的 ID（或 ID 数组）

插槽

名称
作用域
说明
默认值 替换默认 Bootstrap 汉堡包的备用内容

事件

事件
参数
说明
click
  1. 原生点击事件对象
在单击切换时发出

导入单个组件

你可以通过以下命名导出将单个组件导入到你的项目中

组件
命名导出
导入路径
<b-navbar>BNavbarbootstrap-vue
<b-navbar-nav>BNavbarNavbootstrap-vue
<b-navbar-brand>BNavbarBrandbootstrap-vue
<b-navbar-toggle>BNavbarTogglebootstrap-vue

示例

import { BNavbar } from 'bootstrap-vue'
Vue.component('b-navbar', BNavbar)

作为 Vue.js 插件导入

此插件包含上面列出的所有单个组件。插件还包括任何组件别名。

命名导出
导入路径
NavbarPluginbootstrap-vue

此插件还自动包含以下插件

  • NavPlugin
  • DropdownPlugin
  • CollapsePlugin

示例

import { NavbarPlugin } from 'bootstrap-vue'
Vue.use(NavbarPlugin)