导航 & 标签页

关于如何使用 Bootstrap 的文档和示例包括导航组件。

基础导航

Bootstrap 中可用的导航共享通用标记和样式,从基础 .nav 类到活动和禁用状态。 交换修饰符类以在每种样式之间切换。

基础 .nav 组件是使用 flexbox 构建的,为构建所有类型的导航组件提供了坚实的基础。 它包括一些样式覆盖(用于处理列表)、一些针对较大点击区域的链接填充以及基本的禁用样式。

基本 .nav 组件不包含任何 .active 状态。 下面的例子包括了这个类,主要是为了说明这个特定的类不会触发任何特殊的样式。

要将活动状态传达给辅助技术,请使用 aria-current 属性 — 对当前页面使用 page 值,或对当前页面使用 true 一组中的项目。

<ul class="nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">选中的</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">链接</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">链接</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">禁用的</a>
        </li>
      </ul>

类贯穿始终,因此您的标记可以非常灵活。 像上面一样使用 <ul>,如果您的项目顺序很重要,请使用 <ol>,或者使用 <nav> 元素。 因为 .nav 使用 display: flex,所以导航链接的行为与导航项目相同,但没有额外的标记。

<nav class="nav">
        <a class="nav-link active" aria-current="page" href="#">选中的</a>
        <a class="nav-link" href="#">链接</a>
        <a class="nav-link" href="#">链接</a>
        <a class="nav-link disabled">禁用的</a>
      </nav>
可用样式

使用修饰符和实用程序更改 .nav 组件的样式。 根据需要混合和匹配,或构建自己的。

水平对齐

使用flexbox 实用程序更改导航的水平对齐方式。 默认情况下,导航是左对齐的,但您可以轻松地将它们更改为居中或右对齐。

.justify-content-center 为中心:

<ul class="nav justify-content-center">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">选中的</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">链接</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">链接</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">禁用的</a>
        </li>
      </ul>

.justify-content-end 右对齐:

<ul class="nav justify-content-end">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">选中的</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">链接</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">链接</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">禁用的</a>
        </li>
      </ul>
Vertical

通过使用 .flex-column 实用程序更改弹性项目方向来堆叠导航。 需要将它们堆叠在某些视口上而不是其他视口上? 使用响应式版本(例如,.flex-sm-column)。

<ul class="nav flex-column">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">选中的</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">链接</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">链接</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">禁用的</a>
        </li>
      </ul>

与往常一样,垂直导航也可以在没有 <ul> 的情况下进行。

<nav class="nav flex-column">
        <a class="nav-link active" aria-current="page" href="#">选中的</a>
        <a class="nav-link" href="#">链接</a>
        <a class="nav-link" href="#">链接</a>
        <a class="nav-link disabled">禁用的</a>
      </nav>
选项卡

从上面获取基本导航并添加 .nav-tabs 类以生成选项卡式界面。 通过我们的 tab JavaScript 插件,使用它们创建可选项卡区域。

<ul class="nav nav-tabs">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">选中的</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">链接</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">链接</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">禁用的</a>
        </li>
      </ul>
胶囊形式

采用相同的 HTML,但使用 .nav-pills 代替:

<ul class="nav nav-pills">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">选中的</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">链接</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">链接</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">禁用的</a>
        </li>
      </ul>
使...排满并对齐

强制您的 .nav’s 内容扩展两个修饰符类之一的完整可用宽度。 要使用 .nav-item 按比例填充所有可用空间,请使用 .nav-fill。 请注意,所有水平空间都被占用,但并非每个导航项都具有相同的宽度。

<ul class="nav nav-pills nav-fill">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">选中的</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">更长的导航链接</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">链接</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">禁用的</a>
        </li>
      </ul>

当使用基于 <nav> 的导航时,您可以安全地省略 .nav-item,因为样式只需要 .nav-link <a> 元素。

<nav class="nav nav-pills nav-fill">
        <a class="nav-link active" aria-current="page" href="#">选中的</a>
        <a class="nav-link" href="#">更长的导航链接</a>
        <a class="nav-link" href="#">链接</a>
        <a class="nav-link disabled">禁用的</a>
      </nav>

对于等宽元素,请使用 .nav-justified。 所有水平空间都将被导航链接占用,但与上面的 .nav-fill 不同,每个导航项的宽度都相同。

<ul class="nav nav-pills nav-justified">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">选中的</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">更长的导航链接</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">链接</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">禁用的</a>
        </li>
      </ul>

类似于使用基于 <nav> 的导航的 .nav-fill 示例。

<nav class="nav nav-pills nav-justified">
        <a class="nav-link active" aria-current="page" href="#">选中的</a>
        <a class="nav-link" href="#">更长的导航链接</a>
        <a class="nav-link" href="#">链接</a>
        <a class="nav-link disabled">禁用的</a>
      </nav>
使用 flex 实用程序

如果您需要响应式导航变体,请考虑使用一系列flexbox 实用程序。 虽然更冗长,但这些实用程序提供了跨响应断点的更大定制。在下面的示例中,我们的导航将堆叠在最低断点上,然后适应水平布局,从小断点开始填充可用宽度。

<nav class="nav nav-pills flex-column flex-sm-row">
        <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">选中的</a>
        <a class="flex-sm-fill text-sm-center nav-link" href="#">更长的导航链接</a>
        <a class="flex-sm-fill text-sm-center nav-link" href="#">链接</a>
        <a class="flex-sm-fill text-sm-center nav-link disabled">禁用的</a>
      </nav>
关于可访问性

如果您正在使用 navs 提供导航栏,请务必将 role="navigation" 添加到 <ul> 最符合逻辑的父容器中, 或者在整个导航周围包裹一个 <nav> 元素。 不要将角色添加到 <ul> 本身,因为这会阻止它被辅助技术宣布为实际列表。

请注意,导航栏,即使在视觉上被设计为带有 .nav-tabs 类的选项卡,也应该被赋予 role="tablist"role="tabpanel"role="tabpanel" 属性。 这些仅适用于动态选项卡式界面,如 中所述 WAI ARIA 创作实践。 有关示例,请参阅本节中的JavaScript 行为了解动态选项卡式界面。 aria-current 属性在动态选项卡式界面上不是必需的,因为我们的 JavaScript 通过在活动选项卡上添加 aria-selected="true" 来处理选定状态。

使用下拉菜单

添加带有一点额外 HTML 和 dropdowns JavaScript 插件的下拉菜单。

带有下拉菜单的选项卡
<ul class="nav nav-tabs">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">选中的</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Beyond</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">长城</a></li>
            <li><a class="dropdown-item" href="#">光辉岁月</a></li>
            <li><a class="dropdown-item" href="#">喜欢你</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">谁伴我闯荡</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">链接</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">禁用的</a>
        </li>
      </ul>
带有下拉菜单的胶囊样式
<ul class="nav nav-pills">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">选中的</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Beyond</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">长城</a></li>
            <li><a class="dropdown-item" href="#">光辉岁月</a></li>
            <li><a class="dropdown-item" href="#">喜欢你</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">谁伴我闯荡</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">链接</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">禁用的</a>
        </li>
      </ul>
JavaScript 行为

使用标签 JavaScript 插件(单独包含它或通过编译的 bootstrap.js 文件包含它)来扩展我们的导航标签和药丸以创建本地内容的可标签窗格。

动态选项卡式界面,如 WAI 中所述 ARIA 创作实践,需要 role="tablist"role="tab"role="tabpanel" 和其他 aria- 属性,以便将它们的结构、功能和当前状态传达给辅助技术(例如屏幕阅读器)的用户 . 作为最佳实践,我们建议对选项卡使用 <button> 元素,因为这些是触发动态更改的控件,而不是导航到新页面或新位置的链接。

请注意,标签 JavaScript 插件不支持包含下拉菜单的标签界面,因为这些会导致可用性和可访问性问题。 从可用性的角度来看,当前显示的选项卡的触发元素不是立即可见的(因为它位于关闭的下拉菜单中)这一事实可能会导致混淆。 从可访问性的角度来看,目前还没有明智的方法将这种结构映射到标准的 WAI ARIA 模式,这意味着辅助技术的用户不容易理解它。

这是一些占位符内容,主页选项卡的相关内容。单击另一个选项卡将切换此选项卡的可见性以供下一个选项卡使用。 选项卡 JavaScript 交换类以控制内容可见性和样式。 您可以将它与标签、胶囊形式和任何其他 .nav 驱动的导航一起使用。

《辽海丹忠录》是一部有插图的章回体通俗小说。有崇祯年间刊本藏于日本内阁文库,共八卷四十回,题“平原孤愤生戏草,铁崖热肠人偶评”。未完结。显然是由于后来战事的发展超乎了作者的预料。

赤雅,书名。明邝露撰。三卷。作者南海人,以迕邑令走粤西,为傜女云亸娘之客,因悉其山川风土仪物,撰为此书。半系亲身经历,半亦取自古人笔乘。中如“猺人祀典”、“祸斗”、“木客”、“短狐”等条,均有神话传说。

<ul class="nav nav-tabs mb-3" id="myTab" role="tablist">
        <li class="nav-item" role="presentation">
          <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">首页</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">个人简介</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">联系我们</button>
        </li>
      </ul>
      <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
          <p><strong>这是一些占位符内容,主页选项卡的相关内容。</strong>单击另一个选项卡将切换此选项卡的可见性以供下一个选项卡使用。 选项卡 JavaScript 交换类以控制内容可见性和样式。 您可以将它与标签、胶囊形式和任何其他 <code>.nav</code> 驱动的导航一起使用。</p>
        </div>
        <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
          <p>《辽海丹忠录》是一部有插图的章回体通俗小说。有崇祯年间刊本藏于日本内阁文库,共八卷四十回,题“平原孤愤生戏草,铁崖热肠人偶评”。未完结。显然是由于后来战事的发展超乎了作者的预料。</p>
        </div>
        <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
          <p>赤雅,书名。明邝露撰。三卷。作者南海人,以迕邑令走粤西,为傜女云亸娘之客,因悉其山川风土仪物,撰为此书。半系亲身经历,半亦取自古人笔乘。中如“猺人祀典”、“祸斗”、“木客”、“短狐”等条,均有神话传说。</p>
        </div>
      </div>

为了帮助满足您的需求,这适用于基于 <ul> 的标记,如上所示,或任何任意的“滚动你自己的”。 标记。 请注意,如果您正在使用 <nav>,则不应直接向其添加 role="tablist",因为这会覆盖元素的原生 作为导航地标的作用。相反,切换到一个替代元素(在下面的示例中,一个简单的 <div>)并将 <nav> 包裹在它周围。

<nav>
        <div class="nav nav-tabs mb-3" id="nav-tab" role="tablist">
          <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">首页</button>
          <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">个人简介</button>
          <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">联系我们</button>
        </div>
      </nav>
      <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
          <p>作者谈迁是我国17世纪的爱国历史家,《北游录》是记述他1653年到1656年去北京期间的经历见闻,和他写的一些诗文。</p>
        </div>
        <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
          <p>《飞龙全传》是清代吴璿根据旧本《飞龙传》增补改编的长篇英雄传奇小说,共六十回。飞龙:借指皇帝,喻其居高位而临天下,如飞龙在天。</p>
        </div>
        <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
          <p>《银钩赌坊》描述的是西方魔教玉罗刹教主之子玉天宝被杀,银钩赌坊主人蓝胡子栽赃陆小凤。</p>
        </div>
      </div>

选项卡插件也适用于胶囊形式。

从来国家吉凶祸福,虽系天命,多因人事;既有定数,必有预兆。于此若能恐惧修省,便可转灾为祥。所谓妖由人兴,亦由人灭。若但心怀猜忌,欲遏乱萌,好行诛杀,因而奸佞乘机,设谋害人,此非但不足以弭灾,且适足以酿祸。

却说隋主,因梦洪水淹城,心疑有个水傍名姓之人为祸。时朝中有老臣成阝国公李浑,原系陈朝勋旧,陈亡而降隋,仍其旧爵为成阝公。隋主猛然想得:“浑字军傍着水,其封爵为成阝公,成阝者城也,正合水淹城之梦。且军乃兵像,莫非此人便是个祸胎也?但其人已老,又不掌兵权,干不得甚事,除非应在他子孙身上。”

因问左右:“李浑有几子,其子何名?”左右奏道:“李浑长子已亡,止存幼子,小名洪儿。”隋主闻洪儿两字,一发惊疑,想道:“我梦中曾见城上有树,树上有果。树乃本也,树上果是木之子也,木子二字,合来正是个李字。今李家儿子的小名,恰好的洪水的洪字,更合我之所梦。此子将来必不利于国家,当即除之。”

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
        <li class="nav-item" role="presentation">
          <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">首页</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">个人简介</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">联系我们</button>
        </li>
      </ul>
      <div class="tab-content" id="pills-tabContent">
        <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
          <p>从来国家吉凶祸福,虽系天命,多因人事;既有定数,必有预兆。于此若能恐惧修省,便可转灾为祥。所谓妖由人兴,亦由人灭。若但心怀猜忌,欲遏乱萌,好行诛杀,因而奸佞乘机,设谋害人,此非但不足以弭灾,且适足以酿祸。</p>
        </div>
        <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
          <p>却说隋主,因梦洪水淹城,心疑有个水傍名姓之人为祸。时朝中有老臣成阝国公李浑,原系陈朝勋旧,陈亡而降隋,仍其旧爵为成阝公。隋主猛然想得:“浑字军傍着水,其封爵为成阝公,成阝者城也,正合水淹城之梦。且军乃兵像,莫非此人便是个祸胎也?但其人已老,又不掌兵权,干不得甚事,除非应在他子孙身上。”</p>
        </div>
        <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
          <p>因问左右:“李浑有几子,其子何名?”左右奏道:“李浑长子已亡,止存幼子,小名洪儿。”隋主闻洪儿两字,一发惊疑,想道:“我梦中曾见城上有树,树上有果。树乃本也,树上果是木之子也,木子二字,合来正是个李字。今李家儿子的小名,恰好的洪水的洪字,更合我之所梦。此子将来必不利于国家,当即除之。”</p>
        </div>
      </div>

垂直方向的胶囊形式。

遂令内侍赍手敕至李浑家,将洪儿赐死。李浑逼于君命,不得不从。可怜洪儿无端殒命,举家号哭。后人有诗叹云:殷高与文王,因梦得良相。楚襄风流梦,感得神女降。堪叹隋高祖,恶梦添魔障。杀人当禳梦,举动殊孟浪。

隋主以疑心杀了李家之子,此事传播,早惊动了一个姓李的,陡起一片雄心。那人姓李,名靖,字药师,三原人氏,足智多谋深通兵法,且又弓马娴熟。真个能文能武。幼丧父母,育于外家,其舅即韩擒虎也。擒虎常与他谈兵,赞叹道:“可与谈孙吴者,非此子而谁?”时年方弱冠,却负大志。见隋朝用法太峻,料他国脉必不长久。

闻知隋主以梦杀人,暗笑道:“王者不死,杀人何益?”又想道:“据梦树木生子,固当是个李字;洪水滔天,乃天下混一也。将来有天下者,必是个姓李之人。”因便想到自己身上。一日,偶有事到华州,路经华山,闻说山神西岳大王,甚有灵应。

遂具香烛,到庙瞻拜,具疏默祷道:“布衣李靖,不揆狂简,献疏西岳大王殿下。靖闻上清下浊,爱分天地之仪;昼明夜昏,乃著神人之道。又闻聪明正直,依人而行,至诚感神,位不虚矣。伏惟大王嵯峨擅德,肃爽凝威;为灵术制百神,配位名雄四岳;...焚其庙宇,建纵横之略,未为晚也。惟神裁之。”

<div class="d-flex align-items-start">
        <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
          <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">首页</button>
          <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">个人简介</button>
          <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">消息留言</button>
          <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">设置</button>
        </div>
        <div class="tab-content" id="v-pills-tabContent">
          <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
          <p>遂令内侍赍手敕至李浑家,将洪儿赐死。李浑逼于君命,不得不从。可怜洪儿无端殒命,举家号哭。后人有诗叹云:殷高与文王,因梦得良相。楚襄风流梦,感得神女降。堪叹隋高祖,恶梦添魔障。杀人当禳梦,举动殊孟浪。</p>
          </div>
          <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
          <p>隋主以疑心杀了李家之子,此事传播,早惊动了一个姓李的,陡起一片雄心。那人姓李,名靖,字药师,三原人氏,足智多谋深通兵法,且又弓马娴熟。真个能文能武。幼丧父母,育于外家,其舅即韩擒虎也。擒虎常与他谈兵,赞叹道:“可与谈孙吴者,非此子而谁?”时年方弱冠,却负大志。见隋朝用法太峻,料他国脉必不长久。</p>
          </div>
          <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
          <p>闻知隋主以梦杀人,暗笑道:“王者不死,杀人何益?”又想道:“据梦树木生子,固当是个李字;洪水滔天,乃天下混一也。将来有天下者,必是个姓李之人。”因便想到自己身上。一日,偶有事到华州,路经华山,闻说山神西岳大王,甚有灵应。</p>
          </div>
          <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
          <p>遂具香烛,到庙瞻拜,具疏默祷道:“布衣李靖,不揆狂简,献疏西岳大王殿下。靖闻上清下浊,爱分天地之仪;昼明夜昏,乃著神人之道。又闻聪明正直,依人而行,至诚感神,位不虚矣。伏惟大王嵯峨擅德,肃爽凝威;为灵术制百神,配位名雄四岳;...焚其庙宇,建纵横之略,未为晚也。惟神裁之。”</p>
          </div>
        </div>
      </div>
使用数据属性

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

<!-- Nav tabs -->
      <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item" role="presentation">
          <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">首页</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">个人简介</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">消息留言</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">设置</button>
        </li>
      </ul>

      <!-- Tab panes -->
      <div class="tab-content">
        <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
        <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
        <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
        <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
      </div>
通过 JavaScript

通过 JavaScript 启用可选项卡(每个选项卡需要单独激活):

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

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

您可以通过多种方式激活单个选项卡:

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

      var 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">...</div>
        <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
        <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
        <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
      </div>
方法
异步方法和转换

所有 API 方法都是异步并启动transition。 它们会在过渡开始后但在过渡结束之前返回给调用者。 此外,转换组件上的方法调用将被忽略

constructor

激活选项卡元素和内容容器。 Tab 应该有一个 data-bs-target 或者,如果使用链接,一个 href 属性,以 DOM 中的容器节点为目标。

<ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item" role="presentation">
          <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">首页</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">个人简介</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">消息留言</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">设置</button>
        </li>
      </ul>

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

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

        firstTab.show()
      </script>
show

选择给定的选项卡并显示其关联的窗格。 之前选择的任何其他选项卡都将被取消选择,并且其关联的窗格被隐藏。 在选项卡窗格实际显示之前返回调用方(即在 shown.bs.tab 事件发生之前)。

  var someTabTriggerEl = document.querySelector('#someTabTrigger')
        var tab = new bootstrap.Tab(someTabTriggerEl)

        tab.show()
dispose

销毁元素的选项卡。

getInstance

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

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

静态方法,允许您获取与 DOM 元素关联的选项卡实例,或创建一个新的实例以防它未初始化

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

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

  1. hide.bs.tab (在当前活动选项卡上)
  2. show.bs.tab(在待显示的选项卡上)
  3. hidden.bs.tab(在上一个活动选项卡上,与 hide.bs.tab 事件相同)
  4. shown.bs.tab(在新激活的刚刚显示的选项卡上,与 show.bs.tab 事件相同)

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

事件类型 描述
show.bs.tab 此事件在标签显示时触发,但在新标签显示之前。 使用 event.targetevent.relatedTarget 分别定位活动选项卡和上一个活动选项卡(如果可用)。
shown.bs.tab 显示选项卡后,此事件在选项卡显示时触发。 使用 event.targetevent.relatedTarget 分别定位活动选项卡和上一个活动选项卡(如果可用)。
hide.bs.tab 此事件在要显示新选项卡时触发(因此要隐藏先前的活动选项卡)。 使用 event.targetevent.relatedTarget 分别定位当前活动选项卡和新的即将活动选项卡。
hidden.bs.tab 此事件在显示新选项卡后触发(因此先前的活动选项卡被隐藏)。 使用 event.targetevent.relatedTarget 分别定位上一个活动选项卡和新活动选项卡。
var tabEl = document.querySelector('button[data-bs-toggle="tab"]')
      tabEl.addEventListener('shown.bs.tab', function (event) {
        event.target // newly activated tab
        event.relatedTarget // previous active tab
      })