导航栏(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>如果提供了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-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-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-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, lg和 xl。将toggleable 设置为true（或空字符串）将设置导航条始终折叠，而将其设置为false（默认设置）将禁用折叠（始终展开）。

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

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

打印

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

另请参阅

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

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

组件引用

View source

<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`	默认情况下，打印时导航栏是隐藏的。当这个道具设置好后，它将被打印出来

Functional Component

View source

<b-navbar-nav> 属性

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

Functional Component

View source

<b-navbar-brand> 属性

属性 (单击可升序排序)	类型	默认值	描述
`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链接）特定属性的更多详细信息，请参阅路由器支持参考部分。

View source

<b-navbar-toggle> 组件别名
<b-navbar-toggle> 属性
<b-navbar-toggle> 事件

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

<b-nav-toggle>

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

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

事件	参数	描述
`click`	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)

导航栏(Navbar)

颜色配置

布局

支持的内容

`<b-navbar-brand>`

`<b-navbar-nav>`

`<b-nav-item>`

`<b-nav-text>`

`<b-nav-form>`

`<b-navbar-toggle>` and `<b-collapse is-nav>`

打印

另请参阅

组件引用

`<b-navbar>`

属性

`<b-navbar-nav>`

属性

`<b-navbar-brand>`

属性

`<b-navbar-toggle>`

组件别名

属性

事件

导入单个组件

作为Vue.js插件导入

导航栏(Navbar)

颜色配置

布局

支持的内容

<b-navbar-brand>

<b-navbar-nav>

<b-nav-item>

<b-nav-text>

<b-nav-item-dropdown>

<b-nav-form>

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

打印

另请参阅

组件引用

属性

属性

属性

组件别名

属性

事件

导入单个组件

作为Vue.js插件导入

`<b-navbar-brand>`

`<b-navbar-nav>`

`<b-nav-item>`

`<b-nav-text>`

`<b-nav-item-dropdown>`

`<b-nav-form>`

`<b-navbar-toggle>` and `<b-collapse is-nav>`