logoOutUI

⌘ K
  • 指南
  • 组件
  • 工具类
  • 其他
v5.3.x
  • 组件总览
  • 通用
    • Color 色彩
    • Icon 图标
    • Button 按钮
    • Text 文本
    • Link 链接
    • Typography 排版
  • 布局
    • Grid 栅格
    • Layout 布局
    • Stack 堆栈
  • 表单
    • Input 输入框
    • Select 选择器
    • Radio 单选框
    • Checkbox 复选框
    • Input group 输入组
    • Float label 浮动标签
    • ColorPicker 颜色选择器
    • Slider 滑块
    • Switch 开关
    • Upload 文件上传
    • Form 表单
  • 导航
    • Affix 固钉
    • Breadcrumb 面包屑
    • Dropdown 下拉菜单
    • NavBar 导航栏
    • NavMenu 导航菜单
    • Tabs 标签页
    • Pagination 分页
  • 数据
    • Table 表格
    • Tag 标签
    • Progress 进度条
    • Badge 徽章
    • Avatar 头像
最后更新时间:
NavMenu 导航菜单Pagination 分页
Copyright © 2021-present 粤ICP备2021136339号
‌
‌
‌
‌

Tabs 标签页

选项卡切换组件。

代码演示

基本

添加 .nav-tabs 类来生成选项卡,.active 类用于设置当前活动链接。.disabled 类用于禁用链接

pills

.nav-pills 类用于生成 pills 选项卡

下划线

.nav-underline 类用于生成下划线选项卡

自动填充

.nav-fill 类用于生成填充选项卡,项目的宽度会根据内容自动调整,以填充整个容器。项也可以使用 a 标签来实现。

等宽填充

.nav-justified 类用于生成等宽选项卡,项的宽度会根据内容自动调整,以填充整个容器。

响应式

如果你需要响应式导航变化,请使用flexbox实用程序。在下面的示例中,我们的导航将堆叠在最低的断点上,然后适应水平布局,从小断点开始填充可用宽度。

带下拉选项卡

带下拉pills

交互

选项卡

通过引入bootstrap.js 来启用选项卡交互。请注意,如果你使用 nav 标签,则不应将 role="tablist" 直接添加到其中,因为这会覆盖该元素作为导航地标的原生角色。

pills

垂直

对于垂直选项卡,你还应该将 aria-orientation="vertical" 添加到选项卡列表容器中

使用数据属性

你只需在元素上指定 data-bs-toggle="tab" 或 data-bs-toggle="pill" 即可激活选项卡或平板导航,无需编写任何 JavaScript。在 .nav-tabs 或 .nav-pills 上使用这些数据属性

通过Javascript

const triggerTabList = document.querySelectorAll('#myTab button')
triggerTabList.forEach(triggerEl => {
const tabTrigger = new bootstrap.Tab(triggerEl)
triggerEl.addEventListener('click', event => {
event.preventDefault()
tabTrigger.show()
})
})

你可以通过多种方式激活各个选项卡:

const triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
const triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

淡入淡出

要使选项卡淡入,请将 .fade 添加到每个 .tab-pane。第一个选项卡窗格还必须具有 .show 以使初始内容可见。

<div class="tab-content">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
<div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
<div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

API

方法

方法名描述
dispose销毁元素的选项卡
getInstance静态方法允许您获取与 DOM 元素关联的选项卡实例,您可以像这样使用它:bootstrap.Tab.getInstance(element)。
getOrCreateInstance静态方法返回与 DOM 元素关联的选项卡实例,如果未初始化则创建一个新实例。您可以像这样使用它:bootstrap.Tab.getOrCreateInstance(element)。
show选择给定的选项卡并显示其关联窗格。之前选择的任何其他选项卡将变为未选择状态,并且其关联窗格将被隐藏。在实际显示选项卡窗格之前(即在shown.bs.tab事件发生之前)返回给调用者。

事件

显示新选项卡时,事件按以下顺序触发:

  1. hide.bs.tab(在当前活动选项卡上)

  2. show.bs.tab(在要显示的选项卡上)

  3. hidden.bs.tab(在上一个活动选项卡上,与 hide.bs.tab 事件相同)

  4. shown.bs.tab(在刚刚显示的新活动选项卡上,与 show.bs.tab 事件相同)

如果没有任何选项卡处于活动状态,则不会触发 hide.bs.tab 和 hidden.bs.tab 事件。

时间类型描述
hide.bs.tab当要显示新选项卡(因此要隐藏前一个活动选项卡)时,将触发此事件。分别使用·event.target·和·event.relatedTarget·定位当前活动选项卡和即将活动的新选项卡。
hidden.bs.tab此事件在新选项卡显示后触发(因此前一个活动选项卡被隐藏)。分别使用event.target和event.relatedTarget定位前一个活动选项卡和新活动选项卡。
show.bs.tab此事件在标签页显示时触发,但在新标签页显示之前。使用event.target和event.relatedTarget分别定位活动标签页和上一个活动标签页(如果可用)。
shown.bs.tab 此事件在标签显示后触发。使用event.target和event.relatedTarget分别定位活动标签和上一个活动标签(如果可用)。

示例

const tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', event => {
event.target // newly activated tab
event.relatedTarget // previous active tab
})