列表组 - 光年(Light Year Admin V5)后台管理系统模板

列表组

列表组是用于显示一系列内容的灵活而强大的组件。修改和扩展它们以支持其中的任何内容。

基础示例

最基本的列表组是一个包含列表项和适当类的无序列表。使用以下选项或根据需要使用您自己的 CSS 构建它。

金毛犼爱财设巧计山西雁贪功坠牢笼
徐良临险地多亏好友石仁入贼室搭救宾朋
入破庙人鬼乱闹奔古寺差解同行
儒宁村贤人遭害太岁坊恶霸行凶
贪官见财忘天理先生定计蔑良心

<ul class="list-group">
  <li class="list-group-item">金毛犼爱财设巧计 山西雁贪功坠牢笼</li>
  <li class="list-group-item">徐良临险地多亏好友 石仁入贼室搭救宾朋</li>
  <li class="list-group-item">入破庙人鬼乱闹 奔古寺差解同行</li>
  <li class="list-group-item">儒宁村贤人遭害 太岁坊恶霸行凶</li>
  <li class="list-group-item">贪官见财忘天理 先生定计蔑良心</li>
</ul>

起作用的项

将 .active 添加到 .list-group-item 以指示当前被选中起作用的。

二解差欺心害施俊三贼冠用计战徐良
钦差门上悬御匾智化项下挂金牌
知恩不报偏生歹意放火烧人反害自身
金钱堡店中观四寇太岁坊门首看凶徒
遇吊客魂胆吓落见大汉夸奖奇才

<ul class="list-group">
  <li class="list-group-item active" aria-current="true">二解差欺心害施俊 三贼冠用计战徐良</li>
  <li class="list-group-item">钦差门上悬御匾 智化项下挂金牌</li>
  <li class="list-group-item">知恩不报偏生歹意 放火烧人反害自身</li>
  <li class="list-group-item">金钱堡店中观四寇 太岁坊门首看凶徒</li>
  <li class="list-group-item">遇吊客魂胆吓落 见大汉夸奖奇才</li>
</ul>

禁用的项

将 .disabled 添加到 .list-group-item 以使其显示禁用。请注意，某些带有 .disabled 的元素还需要自定义 JavaScript 才能完全禁用其点击事件（例如链接）。

东方明仗造化捉鬼黑妖狐用奇计装神
赵胜害人却教人害恶霸欺人反被人欺
智化送侄妇回店兰娘救盟嫂逃生
窦勇强中铁棍废命东方明受袖箭亡身
金钱堡羞走山西雁毛家疃醉倒铁臂熊

<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">东方明仗造化捉鬼 黑妖狐用奇计装神</li>
  <li class="list-group-item">赵胜害人却教人害 恶霸欺人反被人欺</li>
  <li class="list-group-item">智化送侄妇回店 兰娘救盟嫂逃生</li>
  <li class="list-group-item">窦勇强中铁棍废命 东方明受袖箭亡身</li>
  <li class="list-group-item">金钱堡羞走山西雁 毛家疃醉倒铁臂熊</li>
</ul>

链接和按钮

使用 <a>s 或 <button>s 通过添加 .list-group-item-action。我们将这些伪类分开以确保由非交互元素（如 <li>s 或 <div>s）组成的列表组不会提供点击或挖掘可供性。

请务必不要在此处使用标准的 .btn 类。

假义仆复又生毒计真烈妇二次遇灾星盟兄弟巧会盟兄弟有仇人偏遇有仇人赵保同素贞私奔艾虎遇盟兄行程五里屯女贼漏网尼姑庵地方泄机徐良首盗鱼肠剑二寇双探藏珍楼

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    假义仆复又生毒计 真烈妇二次遇灾星
  </a>
  <a href="#" class="list-group-item list-group-item-action">盟兄弟巧会盟兄弟 有仇人偏遇有仇人</a>
  <a href="#" class="list-group-item list-group-item-action">赵保同素贞私奔 艾虎遇盟兄行程</a>
  <a href="#" class="list-group-item list-group-item-action">五里屯女贼漏网 尼姑庵地方泄机</a>
  <a class="list-group-item list-group-item-action disabled">徐良首盗鱼肠剑 二寇双探藏珍楼</a>
</div>

使用 <button>s，您还可以使用 disabled 属性而不是 .disabled 类。遗憾的是，<a> 不支持 disabled 属性。

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
    伏地君王收二寇 金家弟兄见群贼
  </button>
  <button type="button" class="list-group-item list-group-item-action">屋内金仙身体不爽 院中玉仙故意骗人</button>
  <button type="button" class="list-group-item list-group-item-action">多臂人熊看姑娘练武 东方玉仙教丫鬟打拳</button>
  <button type="button" class="list-group-item list-group-item-action">泄机关捉拿山西雁 说原由丢失多臂熊</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>躺箱之中徐良等死 桌子底下书安求生</button>
</div>

Flush

添加 .list-group-flush 以删除一些边框和圆角以在父容器（例如卡片）中边对边呈现列表组项目。

三元店徐良遇智化白沙滩史丹见朱英
蒋平遇龙滔定计赵虎见史丹施威
美珍楼白菊花受困酒饭铺众好汉捉贼
酱缸内周瑞废命小河中晏飞逃生
吴必正细说家务事冯校尉情愿寻贼人

<ul class="list-group list-group-flush">
  <li class="list-group-item">三元店徐良遇智化 白沙滩史丹见朱英</li>
  <li class="list-group-item">蒋平遇龙滔定计 赵虎见史丹施威</li>
  <li class="list-group-item">美珍楼白菊花受困 酒饭铺众好汉捉贼</li>
  <li class="list-group-item">酱缸内周瑞废命 小河中晏飞逃生</li>
  <li class="list-group-item">吴必正细说家务事 冯校尉情愿寻贼人</li>
</ul>

编号

添加 .list-group-numbered 修饰符类（并可选择使用 <ol> 元素）以选择加入编号列表组项目。数字是通过 CSS 生成的（与 <ol> 的默认浏览器样式相反），以便更好地放置在列表组项目中并允许更好的自定义。

数字由 <ol> 上的 counter-reset 生成，然后使用 ::before 伪元素设置样式并放置在 <li> 带有 counter-increment 和 content。

得宝剑冯渊快乐受熏香晏飞被捉
见恶贼贪淫受害逢二友遇难呈祥
晏飞丢剑悲中喜冯渊得宝喜中悲

<ol class="list-group list-group-numbered">
  <li class="list-group-item">得宝剑冯渊快乐 受熏香晏飞被捉</li>
  <li class="list-group-item">见恶贼贪淫受害 逢二友遇难呈祥</li>
  <li class="list-group-item">晏飞丢剑悲中喜 冯渊得宝喜中悲</li>
</ol>

这些也适用于自定义内容。

塞外奇侠传
主要讲述了杨云骢、飞红巾和纳兰明慧之间的渊源。前接《白发魔女传》、后接《七剑下天山》，同属天山系列。
14
七剑下天山
主要讲述了清朝初年，以凌未风为首的天山七剑和反清志士一起为推翻清廷暴政而多方奔走的故事。
14
江湖三女侠
主要讲述了清朝初年以吕四娘、冯瑛、冯琳组成的江湖三女侠的传奇经历。
14

<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">塞外奇侠传</div>
      主要讲述了杨云骢、飞红巾和纳兰明慧之间的渊源。前接《白发魔女传》、后接《七剑下天山》，同属天山系列。
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">七剑下天山</div>
      主要讲述了清朝初年，以凌未风为首的天山七剑和反清志士一起为推翻清廷暴政而多方奔走的故事。
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">江湖三女侠</div>
      主要讲述了清朝初年以吕四娘、冯瑛、冯琳组成的江湖三女侠的传奇经历。
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
</ol>

水平的

添加 .list-group-horizontal 以将列表组项目的布局从所有断点的垂直更改为水平。或者，选择响应式变体 .list-group-horizontal-{sm|md|lg|xl|xxl} 以使列表组从该断点的 min-width 开始水平。目前水平列表组不能与刷新列表组组合。

专业提示： 想要水平时等宽列表组项目？将 .flex-fill 添加到每个列表组项。

史丹无心投员外天彪假意认干爹
众好汉二盗鱼肠剑小太保初观红翠花
赛地鼠龙须下废命玉面猫乱刀中倾生

史丹无心投员外天彪假意认干爹
众好汉二盗鱼肠剑小太保初观红翠花
赛地鼠龙须下废命玉面猫乱刀中倾生

史丹无心投员外天彪假意认干爹
众好汉二盗鱼肠剑小太保初观红翠花
赛地鼠龙须下废命玉面猫乱刀中倾生

史丹无心投员外天彪假意认干爹
众好汉二盗鱼肠剑小太保初观红翠花
赛地鼠龙须下废命玉面猫乱刀中倾生

史丹无心投员外天彪假意认干爹
众好汉二盗鱼肠剑小太保初观红翠花
赛地鼠龙须下废命玉面猫乱刀中倾生

史丹无心投员外天彪假意认干爹
众好汉二盗鱼肠剑小太保初观红翠花
赛地鼠龙须下废命玉面猫乱刀中倾生

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">史丹无心投员外 天彪假意认干爹</li>
  <li class="list-group-item">众好汉二盗鱼肠剑 小太保初观红翠花</li>
  <li class="list-group-item">赛地鼠龙须下废命 玉面猫乱刀中倾生</li>
</ul>
<ul class="list-group list-group-horizontal-sm">
  <li class="list-group-item">史丹无心投员外 天彪假意认干爹</li>
  <li class="list-group-item">众好汉二盗鱼肠剑 小太保初观红翠花</li>
  <li class="list-group-item">赛地鼠龙须下废命 玉面猫乱刀中倾生</li>
</ul>
<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item">史丹无心投员外 天彪假意认干爹</li>
  <li class="list-group-item">众好汉二盗鱼肠剑 小太保初观红翠花</li>
  <li class="list-group-item">赛地鼠龙须下废命 玉面猫乱刀中倾生</li>
</ul>
<ul class="list-group list-group-horizontal-lg">
  <li class="list-group-item">史丹无心投员外 天彪假意认干爹</li>
  <li class="list-group-item">众好汉二盗鱼肠剑 小太保初观红翠花</li>
  <li class="list-group-item">赛地鼠龙须下废命 玉面猫乱刀中倾生</li>
</ul>
<ul class="list-group list-group-horizontal-xl">
  <li class="list-group-item">史丹无心投员外 天彪假意认干爹</li>
  <li class="list-group-item">众好汉二盗鱼肠剑 小太保初观红翠花</li>
  <li class="list-group-item">赛地鼠龙须下废命 玉面猫乱刀中倾生</li>
</ul>
<ul class="list-group list-group-horizontal-xxl">
  <li class="list-group-item">史丹无心投员外 天彪假意认干爹</li>
  <li class="list-group-item">众好汉二盗鱼肠剑 小太保初观红翠花</li>
  <li class="list-group-item">赛地鼠龙须下废命 玉面猫乱刀中倾生</li>
</ul>

上下文类

使用上下文类来设置具有状态背景和颜色的列表项的样式。

黄面狼细讲途中故小韩信分说旧衷情
清净庵天彪逢双女养性堂梁氏见干儿
蒋平给天彪虑后事梁氏与二女定终身
到后院夫妻谈楼事上信阳校尉请先生
徐良前边戏耍周凯冯渊后面搭救佳人
贾家屯冯渊中暗器小酒铺姑娘救残生
生铁佛庙中说亲事刘志齐家内画楼图
徐良在院中被获周凯到树林脱身
三盗鱼肠剑大众起身巧破藏珍楼英雄独往

<ul class="list-group">
  <li class="list-group-item">黄面狼细讲途中故 小韩信分说旧衷情</li>

  <li class="list-group-item list-group-item-primary">清净庵天彪逢双女 养性堂梁氏见干儿</li>
  <li class="list-group-item list-group-item-secondary">蒋平给天彪虑后事 梁氏与二女定终身</li>
  <li class="list-group-item list-group-item-success">到后院夫妻谈楼事 上信阳校尉请先生</li>
  <li class="list-group-item list-group-item-danger">徐良前边戏耍周凯 冯渊后面搭救佳人</li>
  <li class="list-group-item list-group-item-warning">贾家屯冯渊中暗器 小酒铺姑娘救残生</li>
  <li class="list-group-item list-group-item-info">生铁佛庙中说亲事 刘志齐家内画楼图</li>
  <li class="list-group-item list-group-item-light">徐良在院中被获 周凯到树林脱身</li>
  <li class="list-group-item list-group-item-dark">三盗鱼肠剑大众起身 巧破藏珍楼英雄独往</li>
</ul>

上下文类也适用于 .list-group-item-action。请注意，此处添加的悬停样式在前面的示例中没有出现。还支持 .active 状态；应用它来指示上下文列表组项上的活动选择。

冯校尉柁上得剑山西雁楼内着急夜晚藏珍楼芸生得宝次日白沙滩大众同行擂台下总镇知府相会看棚前老少英雄施威乔彬头次上台打擂张豹二番论武失机穷汉打擂连赢四阵史云动手不教下台艾虎与群贼抡拳比武徐良见台官讲论雌雄二英雄力劈王兴祖两好汉打死东方清亲姊妹逃奔商水县师兄弟相逢白沙滩金弓二郎带金仙单走莲花仙子会玉仙同行

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">冯校尉柁上得剑 山西雁楼内着急</a>

  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">夜晚藏珍楼芸生得宝 次日白沙滩大众同行</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">擂台下总镇知府相会 看棚前老少英雄施威</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">乔彬头次上台打擂 张豹二番论武失机</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">穷汉打擂连赢四阵 史云动手不教下台</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">艾虎与群贼抡拳比武 徐良见台官讲论雌雄</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">二英雄力劈王兴祖 两好汉打死东方清</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">亲姊妹逃奔商水县 师兄弟相逢白沙滩</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">金弓二郎带金仙单走 莲花仙子会玉仙同行</a>
</div>

向辅助技术传达意义

使用颜色来添加意义仅提供视觉指示，不会传达给辅助技术的用户 - 例如屏幕阅读器。确保由颜色表示的信息在内容本身（例如可见文本）中是显而易见的，或者通过其他方式包含在内，例如使用 .visually-hidden 类隐藏的附加文本。

带徽章的

在某些实用程序的帮助下，将徽章添加到任何列表组项目以显示未读计数、活动等。

抢囚车头回中计劫法场二次扑空 14
玉仙纪小泉开封行刺芸生刘士杰衙内拿人 2
艾虎三更追女寇于奢夜晚获男贼 1

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    抢囚车头回中计 劫法场二次扑空
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    玉仙纪小泉开封行刺 芸生刘士杰衙内拿人
    <span class="badge bg-primary rounded-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    艾虎三更追女寇 于奢夜晚获男贼
    <span class="badge bg-primary rounded-pill">1</span>
  </li>
</ul>

自定义内容

在flexbox 实用程序的帮助下，几乎可以在其中添加任何 HTML，甚至是像下面这样的链表组。

搜神记

3天前

一部记录古代民间传说中神奇怪异故事的小说集。

作者是东晋的史学家干宝。

呼家将

3天前

又名《说呼全传》、《呼家后代全传》、《紫金鞭演义》，共十二卷四十回。

作者名已佚。

鬼谷四友志

3天前

又名《孙庞演义七国志全传》，古代中国白话历史小说。

有清代刊本。

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">搜神记</h5>
      <small>3天前</small>
    </div>
    <p class="mb-1">一部记录古代民间传说中神奇怪异故事的小说集。</p>
    <small>作者是东晋的史学家干宝。</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">呼家将</h5>
      <small class="text-muted">3天前</small>
    </div>
    <p class="mb-1">又名《说呼全传》、《呼家后代全传》、《紫金鞭演义》，共十二卷四十回。</p>
    <small class="text-muted">作者名已佚。</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">鬼谷四友志</h5>
      <small class="text-muted">3天前</small>
    </div>
    <p class="mb-1">又名《孙庞演义七国志全传》，古代中国白话历史小说。</p>
    <small class="text-muted">有清代刊本。</small>
  </a>
</div>

复选框和单选框

将 Bootstrap 的复选框和单选放在列表组项目中，并根据需要进行自定义。您可以在没有 <label> 的情况下使用它们，但请记住包含 aria-label 属性和值以实现可访问性。

伪自由书
中国小说史略
汉文学史纲要
文序跋集
古籍序跋集

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    伪自由书
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    中国小说史略
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    汉文学史纲要
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    文序跋集
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    古籍序跋集
  </li>
</ul>

如果您希望 <label>s 作为大命中区域的 .list-group-item，您也可以这样做。

而已集花边文学热风故事新编阿Q正传

<div class="list-group">
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    而已集
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    花边文学
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    热风
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    故事新编
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    阿Q正传
  </label>
</div>

JavaScript 行为

使用标签 JavaScript 插件（单独包含它或通过编译的 bootstrap.js 文件包含它）来扩展我们的列表组以创建本地内容的可标签窗格。

射雕英雄传天龙八部神雕侠侣倚天屠龙记

该书讲述了郭靖背负着家恨国仇闯入江湖，在红颜知己黄蓉的帮助下通过无数历练，最终成长为“侠之大者”的民族英雄的武林故事。

小说以宋哲宗时代为背景，通过宋、辽、大理、西夏、吐蕃等王国之间的武林恩怨和民族矛盾，从哲学的高度对人生和社会进行审视和描写，展示了一幅波澜壮阔的生活画卷，其故事之离奇曲折、涉及人物之众多、历史背景之广泛、武侠战役之庞大、想象力之丰富当属“金书”之最。

讲述了南宋末年，杨过和小龙女经历了一番凄美爱情与江湖恩怨的故事。一样的故事，不一样的情节，力求展现一个可歌可泣的江湖往事。

《倚天屠龙记》是武侠小说家金庸1961年所著的长篇小说，“射雕三部曲”系列第三部。故事时间前后跨度一百年，以元末群雄纷起、江湖动荡为广阔背景，剧情围绕两样兵器屠龙刀和倚天剑展开。

<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="tab" href="#list-home" role="tab" aria-controls="list-home">射雕英雄传</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="tab" href="#list-profile" role="tab" aria-controls="list-profile">天龙八部</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="tab" href="#list-messages" role="tab" aria-controls="list-messages">神雕侠侣</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="tab" href="#list-settings" role="tab" aria-controls="list-settings">倚天屠龙记</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
        <p>该书讲述了郭靖背负着家恨国仇闯入江湖，在红颜知己黄蓉的帮助下通过无数历练，最终成长为“侠之大者”的民族英雄的武林故事。</p>
      </div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">
        <p>小说以宋哲宗时代为背景，通过宋、辽、大理、西夏、吐蕃等王国之间的武林恩怨和民族矛盾，从哲学的高度对人生和社会进行审视和描写，展示了一幅波澜壮阔的生活画卷，其故事之离奇曲折、涉及人物之众多、历史背景之广泛、武侠战役之庞大、想象力之丰富当属“金书”之最。</p>
      </div>
      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">
        <p>讲述了南宋末年，杨过和小龙女经历了一番凄美爱情与江湖恩怨的故事。一样的故事，不一样的情节，力求展现一个可歌可泣的江湖往事。</p>
      </div>
      <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">
        <p>《倚天屠龙记》是武侠小说家金庸1961年所著的长篇小说，“射雕三部曲”系列第三部。故事时间前后跨度一百年，以元末群雄纷起、江湖动荡为广阔背景，剧情围绕两样兵器屠龙刀和倚天剑展开。</p>
      </div>
    </div>
  </div>
</div>

通过 JavaScript

通过 JavaScript 启用可选项卡列表项（每个列表项需要单独激活）：

var triggerTabList = Array.prototype.slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', function (event) {
    event.preventDefault()
    tabTrigger.show()
  })
})

您可以通过多种方式激活单个列表项：

var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
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">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel">...</div>
</div>

方法

constructor

激活列表项元素和内容容器。Tab 应该有一个 data-bs-target 或一个 href 以 DOM 中的容器节点为目标。

<div class="list-group" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Settings</a>
</div>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">...</div>
  <div class="tab-pane" id="profile" role="tabpanel">...</div>
  <div class="tab-pane" id="messages" role="tabpanel">...</div>
  <div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>

<script>
  var firstTabEl = document.querySelector('#myTab a:last-child')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

show

选择给定的列表项并显示其关联的窗格。先前选择的任何其他列表项都将变为未选择，并且其关联的窗格被隐藏。 在选项卡窗格实际显示之前返回调用方（例如，在 shown.bs.tab 事件发生之前）。

  var someListItemEl = document.querySelector('#someListItem')
  var tab = new bootstrap.Tab(someListItemEl)

  tab.show()

dispose

销毁元素的选项卡。

getInstance

Static 方法，允许您获取与 DOM 元素关联的选项卡实例

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance

getOrCreateInstance

Static 方法，该方法允许您获取与 DOM 元素关联的选项卡实例，或者在未初始化的情况下创建一个新实例

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance

Events

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

hide.bs.tab（在当前起作用的选项卡上）
show.bs.tab（在待显示的选项卡上）
hidden.bs.tab（在上一个起作用的选项卡上，与 hide.bs.tab 事件相同）
shown.bs.tab（在新激活的刚刚显示的选项卡上，与 show.bs.tab 事件相同）

如果没有选项卡处于起作用的状态，则不会触发 hide.bs.tab 和 hidden.bs.tab 事件。

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

var tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(function(tabElm) {
  tabElm.addEventListener('shown.bs.tab', function (event) {
    event.target // newly activated tab
    event.relatedTarget // previous active tab
  })
}