导航栏(Navbar)

组件<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 v-slot: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>支持标准引导v4可用的背景色变量。 将variant属性设置为以下值之一以更改背景颜色: primary, success, info, warning, danger, dark,或 light

控制文本颜色,方法是将type 属性设置为light以用于浅色背景颜色变体, 或将dark设置为深色背景颜色变体。

布局

通过设置两个属性之一来控制导航栏的位置:

属性 类型 默认值 描述
fixed String null 设置为top表示固定到视口的顶部,或设置为bottom表示固定到视口的 底部
sticky Boolean false 设置为true可使导航栏在滚动时粘在视口(或具有position: relative的父容器)的顶部。

注意事项:

  • 固定位置使用CSS position: fixed。您可能需要调整文档的顶部/底部填充或边距。
  • CSS位置:不是每个浏览器都完全支持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>

<b-navbar-brand>如果提供了ref,则生成一个href; 如果提供了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>
<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>添加图像可能始终需要自定义样式或实用程序来正确调整大小。以下是一些示例:

<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>
<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-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 属性将突出显示该项目作为active页面,通过将属性disabled设置为true禁用 <b-nav-item>

通过为 <b-nav-item>上的@click事件指定处理程序来处理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-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-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>

输入组也可以工作:

<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-toggle> and <b-collapse is-nav>

导航栏在默认情况下没有响应,但是您可以很容易地修改它们来更改它。反应行为取决于我们的<b-collapse>成分。

<b-collapse is-nav>中包装 <b-navbar-nav>组件(记住要设置is-nav属性!) 指定将基于特定断点折叠的内容。在<b-collapse>上指定文档唯一id值。

使用<b-navbar-toggle>组件控制折叠组件, 并将<b-navbar-toggle>目标属性设置为<b-collapse>id

<b-navbar>上的toggleable属性 设置为希望内容自动展开的所需断点。可能的可切换值是sm, md, lgxl。将toggleable 设置为true(或空字符串)将设置导航条始终折叠,而将其设置为false(默认设置)将禁用折叠(始终展开)。

默认情况下,<b-navbar-toggle>组件是左对齐的, 但如果它们遵循类似于<b-navbar-brand>的同级元素,则它们将自动与最右侧对齐。反转标记将反转切换器的位置。

请参阅本页的第一个示例以供参考,有关折叠组件的详细信息,请参阅<b-collapse>

打印

默认情况下,打印时导航栏是隐藏的。通过设置print属性强制打印。

另请参阅

请参阅路由器支持参考页以获取路由器链接特定的属性。

有关其他组件和子组件别名,请参见<b-nav>

组件引用

<b-navbar>

属性

属性 类型 默认值 描述
tag String 'nav' 指定要呈现的HTML标记,而不是默认标记
type String 'light' 控制文本颜色,方法是将“浅色”设置为与浅色背景颜色变体一起使用,或将“深色”设置为与深色背景颜色变体一起使用
variant String 将一个引导主题颜色变体应用于组件
toggleable Boolean or String false 对于始终折叠的导航栏,设置为“true”,或者设置为特定断点,此时导航栏将展开:“sm”、“md”、“lg”或“xl”
fixed String 设置为“顶”表示固定在视口顶部,或设置为“底”表示固定在视口底部
sticky Boolean false 设置为true可使导航条在滚动时粘在视口的顶部(或设置了“position:relative”的父容器)
print Boolean false 默认情况下,打印时导航栏是隐藏的。当这个道具设置好后,它将被打印出来

<b-navbar-nav>

Functional Component

属性

属性 类型 默认值 描述
tag String 'ul' 指定要呈现的HTML标记,而不是默认标记
fill Boolean false 按比例用导航项填充所有水平空间。所有水平空间都被占用,但不是每个导航项都有相同的宽度
justified Boolean false 用导航项填充所有水平空间,但与“填充”不同,每个导航项的宽度都相同
align String 对齐导航中的导航项:“开始”(或“左”)、“中心”、“结束”(或“右”)
small Boolean false 使导航更小

<b-navbar-brand>

Functional Component

属性

属性 (单击可升序排序) 类型 默认值 描述
href String 表示标准a链接的链接的目标URL
rel String 设置呈现链接的“rel”属性
target String '_self' 设置呈现链接的“target”属性
active Boolean false 当设置为“true”时,使用活动样式将组件置于活动状态
disabled Boolean false 当设置为“true”时,将禁用组件的功能并将其置于禁用状态
to String or Object 路由器链接属性:表示链接的目标路由。单击时,to prop的值将在内部传递给router.push(),因此该值可以是字符串或位置描述符对象
append Boolean false 路由器链接属性:设置附加属性总是将相对路径附加到当前路径
replace Boolean false 路由器链接属性:设置替换属性将在单击时调用“router.replace()”,而不是“router.push()”,因此导航不会留下历史记录
event String or Array 'click' 路由器链接属性:指定触发链接的事件。在大多数情况下,您应该将其保留为默认值
active-class String 路由器链接属性:配置当链接处于活动状态时应用的活动CSS类。通常您需要将其设置为类名“active”
exact Boolean false 路由器链接属性:默认的活动类匹配行为是包含匹配。设置此道具将强制模式与路线完全匹配
exact-active-class String 路由器链接属性:配置当链接处于活动状态时应用的活动CSS类,精确匹配。通常您需要将其设置为类名“active”
router-tag String 'a' 路由器链接属性:指定要呈现的标记,它仍将侦听用于导航的单击事件“路由器标记”转换为最终呈现路由器链接上的标记属性。通常应该使用默认值
no-prefetch Boolean false nuxt link prop:为了提高nuxt.js应用程序的响应性,当链接显示在视区内时,nuxt.js将自动预取代码分割的页面。设置“无预取”将禁用特定链接的此功能
tag String 'div' 指定要呈现的HTML标记,而不是默认标记

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

<b-navbar-toggle>

组件别名

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

  • <b-nav-toggle>

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

属性

属性 类型 默认值 描述
label String 'Toggle navigation' 要放置在切换的“aria label”属性中的字符串
target Required String 折叠控件的折叠ID

事件

事件 参数 描述
click
  1. Native click event object
单击切换时发出。

导入单个组件

可以通过以下命名导出将各个组件导入到项目中:

组成部分 命名导出 导入路径
<b-navbar> BNavbar bootstrap-vue
<b-navbar-nav> BNavbarNav bootstrap-vue
<b-navbar-brand> BNavbarBrand bootstrap-vue
<b-navbar-toggle> BNavbarToggle bootstrap-vue

例子:

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

作为Vue.js插件导入

这个插件包括上面列出的所有独立组件。插件还包括任何组件别名。

Named Export Import Path
NavbarPlugin bootstrap-vue

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

  • NavPlugin
  • DropdownPlugin
  • CollapsePlugin

例子:

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