Navs

有关如何使用Bootstrap随附的导航组件的文档和示例。

基础导航

Bootstrap中可用的导航从基础开始共享常规标记和样式 .nav 分为活动状态和禁用状态。交换修饰符类可在每种样式之间切换。

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

基地 .nav 组件不包含任何 .active 州。以下示例包括该类,主要是为了证明该特定类不会触发任何特殊样式。

<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#"> 活性 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Link </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Link </a>
</li>
<li class="nav-item">
<a aria-disabled="true" class="nav-link disabled" href="#" tabindex="-1"> 残障人士 </a>
</li>
</ul>

整个过程都使用了类,因此您的标记可以超级灵活。 Use <ul> 如上 <ol> 如果您的商品的顺序很重要,或者使用 <nav> 元件。因为 .nav uses display: flex ,导航链接的行为与导航项相同,但没有额外的标记。

<nav class="nav">
<a class="nav-link active" href="#"> 活性 </a>
<a class="nav-link" href="#"> Link </a>
<a class="nav-link" href="#"> Link </a>
<a aria-disabled="true" class="nav-link disabled" href="#" tabindex="-1"> 残障人士 </a>
</nav>

可用样式

改变风格 .nav 带有修饰符和实用程序的组件。根据需要混合和匹配,或构建自己的。

水平对齐

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

集中在 .justify-content-center:

<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" href="#"> 活性 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Link </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Link </a>
</li>
<li class="nav-item">
<a aria-disabled="true" class="nav-link disabled" href="#" tabindex="-1"> 残障人士 </a>
</li>
</ul>

右对齐 .justify-content-end:

<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active" href="#"> 活性 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Link </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Link </a>
</li>
<li class="nav-item">
<a aria-disabled="true" class="nav-link disabled" href="#" tabindex="-1"> 残障人士 </a>
</li>
</ul>

垂直

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

<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#"> 活性 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Link </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Link </a>
</li>
<li class="nav-item">
<a aria-disabled="true" class="nav-link disabled" href="#" tabindex="-1"> 残障人士 </a>
</li>
</ul>

与往常一样,垂直导航无需 <ul> 也是。

<nav class="nav flex-column">
<a class="nav-link active" href="#"> 活性 </a>
<a class="nav-link" href="#"> Link </a>
<a class="nav-link" href="#"> Link </a>
<a aria-disabled="true" class="nav-link disabled" href="#" tabindex="-1"> 残障人士 </a>
</nav>

Tabs

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

<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#"> 活性 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Link </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Link </a>
</li>
<li class="nav-item">
<a aria-disabled="true" class="nav-link disabled" href="#" tabindex="-1"> 残障人士 </a>
</li>
</ul>

药丸

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

<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#"> 活性 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Link </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Link </a>
</li>
<li class="nav-item">
<a aria-disabled="true" class="nav-link disabled" href="#" tabindex="-1"> 残障人士 </a>
</li>
</ul>

填写并证明

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

<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<a class="nav-link active" href="#"> 活性 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> 导航链接更长 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Link </a>
</li>
<li class="nav-item">
<a aria-disabled="true" class="nav-link disabled" href="#" tabindex="-1"> 残障人士 </a>
</li>
</ul>

当使用 <nav> 导航,您可以安全地省略 .nav-item 仅 .nav-link 样式必需 <a> 元素。

<nav class="nav nav-pills nav-fill">
<a class="nav-link active" href="#"> 活性 </a>
<a class="nav-link" href="#"> 导航链接更长 </a>
<a class="nav-link" href="#"> Link </a>
<a aria-disabled="true" class="nav-link disabled" href="#" tabindex="-1"> 残障人士 </a>
</nav>

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

<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link active" href="#"> 活性 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> 导航链接更长 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Link </a>
</li>
<li class="nav-item">
<a aria-disabled="true" class="nav-link disabled" href="#" tabindex="-1"> 残障人士 </a>
</li>
</ul>

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

<nav class="nav nav-pills nav-justified">
<a class="nav-link active" href="#"> 活性 </a>
<a class="nav-link" href="#"> 导航链接更长 </a>
<a class="nav-link" href="#"> Link </a>
<a aria-disabled="true" class="nav-link disabled" href="#" tabindex="-1"> 残障人士 </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" 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="#"> Link </a>
<a aria-disabled="true" class="flex-sm-fill text-sm-center nav-link disabled" href="#" tabindex="-1"> 残障人士 </a>
</nav>

关于可访问性

如果您使用导航来提供导航栏,请确保添加一个 role="navigation" 到最逻辑的父容器 <ul> ,或包装一个 <nav> 整个导航中的元素。不要将角色添加到 <ul> 本身,因为这将阻止辅助技术将其宣布为实际列表。

请注意,导航栏即使使用 .nav-tabs 课,应该 not 被给予 role="tablist",role="tab" or role="tabpanel" 属性。这些仅适用于动态选项卡式界面,如 WAI ARIA 创作习惯。看到 JavaScript行为本节中的动态选项卡式界面示例。

使用下拉菜单

添加带有一些额外HTML的下拉菜单, 下拉菜单JavaScript插件 .

带有下拉菜单的标签

<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#"> 活性 </a>
</li>
<li class="nav-item dropdown">
<a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"> 落下 </a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"> 行动 </a>
<a class="dropdown-item" href="#"> 另一个动作 </a>
<a class="dropdown-item" href="#"> 这里还有其他 </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"> 分隔链接 </a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Link </a>
</li>
<li class="nav-item">
<a aria-disabled="true" class="nav-link disabled" href="#" tabindex="-1"> 残障人士 </a>
</li>
</ul>

带下拉菜单的药

<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#"> 活性 </a>
</li>
<li class="nav-item dropdown">
<a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"> 落下 </a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"> 行动 </a>
<a class="dropdown-item" href="#"> 另一个动作 </a>
<a class="dropdown-item" href="#"> 这里还有其他 </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"> 分隔链接 </a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Link </a>
</li>
<li class="nav-item">
<a aria-disabled="true" class="nav-link disabled" href="#" tabindex="-1"> 残障人士 </a>
</li>
</ul>

JavaScript行为

使用标签JavaScript插件-单独或通过编译将其包含 bootstrap.js 文件-扩展我们的导航选项卡和药丸,甚至通过下拉菜单来创建可显示的本地内容窗格。

如果您是从源代码构建JavaScript, 要求 util.js.

动态选项卡式界面,如 WAI ARIA 创作习惯 ,要求 role="tablist",role="tab",role="tabpanel" ,以及其他 aria- 属性,以便将其结构,功能和当前状态传达给辅助技术的用户（例如屏幕阅读器）。

请注意,动态选项卡式界面应 not 包含下拉菜单,因为这会导致可用性和可访问性问题。从可用性的角度来看,当前显示的标签的触发元素不能立即显示（因为它位于关闭的下拉菜单中）,因此可能引起混淆。从可访问性的角度来看,当前没有明智的方法将这种构造映射到标准WAI ARIA模式,这意味着辅助技术的用户无法轻易理解它。

您可能从未听说过原始牛仔布牛仔短裤Austin。 Nesciunt豆腐腐烂的树桩阿里夸,复古合成大师清洗。小胡子陈词滥调,威廉斯堡卡尔素食主义者Helvetica。 Reprehenderit屠夫复古keffiyeh捕梦网合成器。 Cosby毛衣eu banh mi,qui irure特里·理查森（ex squid）。 Aliquip placeat salvia cillum iPhone。 Seitan aliquip quis开襟衫是美国服装,屠夫是nisi qui。

美食车fixie locavore,Accusamus mcsweeney的marfa nulla单源咖啡乌贼。锻炼+1劳动velit,博客裁缝PBR打底裤,下层是wes anderson工匠的四个loko农场到餐桌精制啤酒花呢。 Qui照相亭凸版印刷,commodo enim工艺啤酒mlkshk aliquip牛仔短裤ullamco广告和乙烯基cillum PBR。同源有机物,具有美感。 Keytar Helvetica VHS salvia年,stumptown。素食主义者腰包dioo cillum wes anderson 8位可持续性牛仔短裤胡须和DIY道德根特里·理查森生物柴油。艺术聚会现场人stumptown,tumblr屠夫维罗圣圣萨皮恩特Accusamus纹身回声公园。

Etsy mixtape徒步旅行者,道德的wes anderson豆腐,然后售罄mcsweeney的有机lomo复古腰包lo-fi从农场到餐桌的现成产品。斜挎包绅士化干草叉纹身工艺啤酒,iphone滑板locavore carles etsy salvia banky连帽衫helvetica。 DIY合成器PBR银行讽刺。绑腿使乌贼8位履带式干草叉绅士化。威廉斯堡·班·米尔（Williamsburg Banh mi）不论是无麸质的,卡尔斯干草叉生物柴油修复专家,复古的mlkshk副博客。 Scenester相信您可能从未听说过它们,乙烯基工艺啤酒博客stumptown。干草叉可持续豆腐合成菜粉。

<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a aria-controls="home" aria-selected="true" class="nav-link active" data-toggle="tab" href="#home" id="home-tab" role="tab"> Home </a>
</li>
<li class="nav-item" role="presentation">
<a aria-controls="profile" aria-selected="false" class="nav-link" data-toggle="tab" href="#profile" id="profile-tab" role="tab"> 轮廓 </a>
</li>
<li class="nav-item" role="presentation">
<a aria-controls="contact" aria-selected="false" class="nav-link" data-toggle="tab" href="#contact" id="contact-tab" role="tab"> 联系 </a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div aria-labelledby="home-tab" class="tab-pane fade show active" id="home" role="tabpanel">
<p> 您可能从未听说过原始牛仔布牛仔短裤Austin。  Nesciunt豆腐腐烂的树桩阿里夸,复古合成大师清洗。  小胡子陈词滥调,威廉斯堡卡尔素食主义者Helvetica。  Reprehenderit屠夫复古keffiyeh捕梦网合成器。  Cosby毛衣eu banh mi,qui irure特里·理查森（ex squid）。  Aliquip placeat salvia cillum iPhone。  Seitan aliquip quis开襟衫是美国服装,屠夫是nisi qui。 </p>
</div>
<div aria-labelledby="profile-tab" class="tab-pane fade" id="profile" role="tabpanel">
<p> 美食车fixie locavore,Accusamus mcsweeney的marfa nulla单源咖啡乌贼。  锻炼+1劳动velit,博客裁缝PBR打底裤,下层是wes anderson工匠的四个loko农场到餐桌精制啤酒花呢。  Qui照相亭凸版印刷,commodo enim工艺啤酒mlkshk aliquip牛仔短裤ullamco广告和乙烯基cillum PBR。  同源有机物,具有美感。  Keytar Helvetica VHS salvia年,stumptown。  素食主义者腰包dioo cillum wes anderson 8位可持续性牛仔短裤胡须和DIY道德根特里·理查森生物柴油。  艺术聚会现场人stumptown,tumblr屠夫维罗圣圣萨皮恩特Accusamus纹身回声公园。 </p>
</div>
<div aria-labelledby="contact-tab" class="tab-pane fade" id="contact" role="tabpanel">
<p> Etsy mixtape徒步旅行者,道德的wes anderson豆腐,然后售罄mcsweeney的有机lomo复古腰包lo-fi从农场到餐桌的现成产品。  斜挎包绅士化干草叉纹身工艺啤酒,iphone滑板locavore carles etsy salvia banky连帽衫helvetica。  DIY合成器PBR银行讽刺。  绑腿使乌贼8位履带式干草叉绅士化。  威廉斯堡·班·米尔（Williamsburg Banh mi）不论是无麸质的,卡尔斯干草叉生物柴油修复专家,复古的mlkshk副博客。  Scenester相信您可能从未听说过它们,乙烯基工艺啤酒博客stumptown。  干草叉可持续豆腐合成菜粉。 </p>
</div>
</div>

为了满足您的需求,它可以与 <ul> 标记,如上所示,或带有任意“自己滚动”的标记。请注意,如果您使用的是 <nav> ,您不应该添加 role="tablist" 直接指向它,因为这将覆盖元素作为导航地标的本机角色。相反,请切换到其他元素（在下面的示例中, <div> ）并包装 <nav> 周围。

临时工和临时工,临时工和临时工,最低限度的工伤。 Fugiat veniam inididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim。速效非刺激性阿利夸·乌拉姆科（irqua ulamco）irure incididunt irure非ess consectetur nostrud最小非最小occaecat。 Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit。锻炼culpa nisi culpa non adipisicing reprehenderit do dolore。 Duis reprehenderit occaecat anim ullamco ad duis occaecat ex。

不合法的不合法行为不合法的不合法行为。 Magna duis labour cillum sint adipisicing运动ipsum。不以动画为基础的非劳动劳动。 Commodo esse dolore fugiat sint velit ullamco magna造成了最小化的损失。劳动价格不菲,价格不菲,价格不菲。 Dolore commodo nulla minimet ipsum officia consectetur amet ullamco voluptate nisi commodo ea sit eu。

Sint坐mollit irure quis est nostrud cillum的结果Lorem esse do quis dolor esse fugiat sunt do。 Eu commodo veniam Lorem aliquip laborum occaecat qui qui Lorem esse mollit dolore anim cupidatat。法定官员的证词,即普通律师资格,高级律师资格。劳动者权益法中的“等额和等额”除外。导致等价的等价于最小劳动量和劳动劳动量。取消戒备最低限度的证明文件。 Laboris等于commodo non ut non aliquip reprehenderit null动画occaecat。 Sunt坐着ullamco reprehenderit irure ea ullamco Lorem aute nostrud magna。

<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a aria-controls="nav-home" aria-selected="true" class="nav-link active" data-toggle="tab" href="#nav-home" id="nav-home-tab" role="tab"> Home </a>
<a aria-controls="nav-profile" aria-selected="false" class="nav-link" data-toggle="tab" href="#nav-profile" id="nav-profile-tab" role="tab"> 轮廓 </a>
<a aria-controls="nav-contact" aria-selected="false" class="nav-link" data-toggle="tab" href="#nav-contact" id="nav-contact-tab" role="tab"> 联系 </a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div aria-labelledby="nav-home-tab" class="tab-pane fade show active" id="nav-home" role="tabpanel">
<p> 临时工和临时工,临时工和临时工,最低限度的工伤。  Fugiat veniam inididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim。  速效非刺激性阿利夸·乌拉姆科（irqua ulamco）irure incididunt irure非ess consectetur nostrud最小非最小occaecat。  Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit。  锻炼culpa nisi culpa non adipisicing reprehenderit do dolore。  Duis reprehenderit occaecat anim ullamco ad duis occaecat ex。 </p>
</div>
<div aria-labelledby="nav-profile-tab" class="tab-pane fade" id="nav-profile" role="tabpanel">
<p> 不合法的不合法行为不合法的不合法行为。  Magna duis labour cillum sint adipisicing运动ipsum。  不以动画为基础的非劳动劳动。  Commodo esse dolore fugiat sint velit ullamco magna造成了最小化的损失。  劳动价格不菲,价格不菲,价格不菲。  Dolore commodo nulla minimet ipsum officia consectetur amet ullamco voluptate nisi commodo ea sit eu。 </p>
</div>
<div aria-labelledby="nav-contact-tab" class="tab-pane fade" id="nav-contact" role="tabpanel">
<p> Sint坐mollit irure quis est nostrud cillum的结果Lorem esse do quis dolor esse fugiat sunt do。  Eu commodo veniam Lorem aliquip laborum occaecat qui qui Lorem esse mollit dolore anim cupidatat。  法定官员的证词,即普通律师资格,高级律师资格。  劳动者权益法中的“等额和等额”除外。  导致等价的等价于最小劳动量和劳动劳动量。  取消戒备最低限度的证明文件。  Laboris等于commodo non ut non aliquip reprehenderit null动画occaecat。  Sunt坐着ullamco reprehenderit irure ea ullamco Lorem aute nostrud magna。 </p>
</div>
</div>

tabs插件也可用于药丸。

后果不明朗的违法行为。 Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi。 veniam广告中的Irure magna elit commodo an ven ven culpa eiusmod id nostrud sit cupidatat。 Eiusmod会最小限度地简化动画处理。 Occaecat坐着eu锻炼Lorem inididunt nostrud。

特殊的零食附加的锻炼ipsum ipsum culpa mollit commodo mollit ex。奥特·桑迪奇特·阿梅德·科莫德和圣尼西·德塞特·帕里图尔。 Aliquip ex eiusmod volttate execilid id incididunt elit sunt。 Qui minim sit magna Lorem id and dolore velit Lorem amet exercitation duis deserunt。在id occaecat pariatur ut ullamco ea tempor duis中的动画adidasicing ut。

从无到有的犯罪事实和事实的事实。不适用,不适用,不适用,不适用。 Eiusmod最小运动fugiat irure前劳动者indicerunt做fugiat commodo aliquip坐在id沙漠reprehenderit aliquip nostrud。 Amet ex cupidatatexcepteur aute veniam incididunt mollit cupidatat es irure of ficia elit do ipsum ullamco Lorem。最小限度地进行劳动保护和劳动保护。 Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit。 Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate。莫里特·诺塔（Mollit nulla）没精打采的aliqua cupidatat aliqua pariatur软体动物挥发物挥发物后果非。

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<a aria-controls="pills-home" aria-selected="true" class="nav-link active" data-toggle="pill" href="#pills-home" id="pills-home-tab" role="tab"> Home </a>
</li>
<li class="nav-item" role="presentation">
<a aria-controls="pills-profile" aria-selected="false" class="nav-link" data-toggle="pill" href="#pills-profile" id="pills-profile-tab" role="tab"> 轮廓 </a>
</li>
<li class="nav-item" role="presentation">
<a aria-controls="pills-contact" aria-selected="false" class="nav-link" data-toggle="pill" href="#pills-contact" id="pills-contact-tab" role="tab"> 联系 </a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div aria-labelledby="pills-home-tab" class="tab-pane fade show active" id="pills-home" role="tabpanel">
<p> 后果不明朗的违法行为。  Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi。  veniam广告中的Irure magna elit commodo an ven ven culpa eiusmod id nostrud sit cupidatat。  Eiusmod会最小限度地简化动画处理。  Occaecat坐着eu锻炼Lorem inididunt nostrud。 </p>
</div>
<div aria-labelledby="pills-profile-tab" class="tab-pane fade" id="pills-profile" role="tabpanel">
<p> 特殊的零食附加的锻炼ipsum ipsum culpa mollit commodo mollit ex。  奥特·桑迪奇特·阿梅德·科莫德和圣尼西·德塞特·帕里图尔。  Aliquip ex eiusmod volttate execilid id incididunt elit sunt。  Qui minim sit magna Lorem id and dolore velit Lorem amet exercitation duis deserunt。  在id occaecat pariatur ut ullamco ea tempor duis中的动画adidasicing ut。 </p>
</div>
<div aria-labelledby="pills-contact-tab" class="tab-pane fade" id="pills-contact" role="tabpanel">
<p> 从无到有的犯罪事实和事实的事实。  不适用,不适用,不适用,不适用。  Eiusmod最小运动fugiat irure前劳动者indicerunt做fugiat commodo aliquip坐在id沙漠reprehenderit aliquip nostrud。  Amet ex cupidatatexcepteur aute veniam incididunt mollit cupidatat es irure of ficia elit do ipsum ullamco Lorem。  最小限度地进行劳动保护和劳动保护。  Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit。  Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate。  莫里特·诺塔（Mollit nulla）没精打采的aliqua cupidatat aliqua pariatur软体动物挥发物挥发物后果非。 </p>
</div>
</div>

并配以垂直药丸。

Home 轮廓消息设置

Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint。 Veniam sint duis incididuntunt do esse magna mollitexcepteur labourum qui。我的身份证明书是由劳动者和劳动者共同组成的。 occaecat commodo和voluptate的ipsum dolor最小化molli pariatur。除最低工伤率外的其他非劳动保护措施。

Culpa dolor voluptate do labouris labouris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur。委内瑞拉人民解放运动组织的最低要求。不坐就服从的专职官员。 Ut et elit aliquip laboure Lorem enim eu。 Ululco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur qui。

Fugiat id quis dolor culpa eiusmod日本动漫velitexcepteur proident dolor aute qui magna。偶然发生的劳力事故动画Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla。 Velit et pro巧的Lorem做临时官员。代表洛雷姆·阿利基普（Lorem aliquip）劳动大公国,由联邦安全委员会负责。

Eu dolore ea ullamco dolore Lorem id cupidatatexcepteur reprehenderit consectetur elit id dolor proident in cupidatat officia。擅自改变劳动者的行为。 Aliqui amet qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet。 Culpa ullamco坐在办公室里,在临时宫廷中任职。

<div class="row">
<div class="col-3">
<div aria-orientation="vertical" class="nav flex-column nav-pills" id="v-pills-tab" role="tablist">
<a aria-controls="v-pills-home" aria-selected="true" class="nav-link active" data-toggle="pill" href="#v-pills-home" id="v-pills-home-tab" role="tab"> Home </a>
<a aria-controls="v-pills-profile" aria-selected="false" class="nav-link" data-toggle="pill" href="#v-pills-profile" id="v-pills-profile-tab" role="tab"> 轮廓 </a>
<a aria-controls="v-pills-messages" aria-selected="false" class="nav-link" data-toggle="pill" href="#v-pills-messages" id="v-pills-messages-tab" role="tab"> 消息 </a>
<a aria-controls="v-pills-settings" aria-selected="false" class="nav-link" data-toggle="pill" href="#v-pills-settings" id="v-pills-settings-tab" role="tab"> 设置 </a>
</div>
</div>
<div class="col-9">
<div class="tab-content" id="v-pills-tabContent">
<div aria-labelledby="v-pills-home-tab" class="tab-pane fade show active" id="v-pills-home" role="tabpanel">
<p> Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint。  Veniam sint duis incididuntunt do esse magna mollitexcepteur labourum qui。  我的身份证明书是由劳动者和劳动者共同组成的。  occaecat commodo和voluptate的ipsum dolor最小化molli pariatur。  除最低工伤率外的其他非劳动保护措施。 </p>
</div>
<div aria-labelledby="v-pills-profile-tab" class="tab-pane fade" id="v-pills-profile" role="tabpanel">
<p> Culpa dolor voluptate do labouris labouris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur。  委内瑞拉人民解放运动组织的最低要求。  不坐就服从的专职官员。  Ut et elit aliquip laboure Lorem enim eu。  Ululco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur qui。 </p>
</div>
<div aria-labelledby="v-pills-messages-tab" class="tab-pane fade" id="v-pills-messages" role="tabpanel">
<p> Fugiat id quis dolor culpa eiusmod日本动漫velitexcepteur proident dolor aute qui magna。  偶然发生的劳力事故动画Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla。  Velit et pro巧的Lorem做临时官员。  代表洛雷姆·阿利基普（Lorem aliquip）劳动大公国,由联邦安全委员会负责。 </p>
</div>
<div aria-labelledby="v-pills-settings-tab" class="tab-pane fade" id="v-pills-settings" role="tabpanel">
<p> Eu dolore ea ullamco dolore Lorem id cupidatatexcepteur reprehenderit consectetur elit id dolor proident in cupidatat officia。  擅自改变劳动者的行为。  Aliqui amet qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet。  Culpa ullamco坐在办公室里,在临时宫廷中任职。 </p>
</div>
</div>
</div>
</div>

使用数据属性

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

通过JavaScript

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

您可以通过多种方式激活各个标签：

淡入淡出效果

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

方法

异步方法和转换

所有API方法都是异步然后开始过渡。转换开始后,他们会立即返回给呼叫者,但 在结束之前 。此外,在 过渡组件将被忽略 .

有关更多信息,请参见我们的JavaScript文档。 .

$（）。tab

激活选项卡元素和内容容器。标签应该有一个 data-target 或者 href 在DOM中定位容器节点。

.tab（“显示”）

选择给定的选项卡并显示其关联的窗格。先前选择的任何其他选项卡将变为未选中状态,并且其关联的窗格被隐藏。 在实际显示选项卡窗格之前返回到调用者 （即之前 shown.bs.tab 事件发生）。

.tab（‘dispose’）

销毁元素的标签。

活动

显示新标签时,事件将按以下顺序触发：

hide.bs.tab （在当前活动标签上）
show.bs.tab （在待显示的标签上）
hidden.bs.tab （在上一个活动标签上,与 hide.bs.tab 事件）
shown.bs.tab （在新激活的刚刚显示的标签上,与 show.bs.tab 事件）

如果没有标签处于活动状态,则 hide.bs.tab and hidden.bs.tab 事件不会被触发。

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

Bootstrap/docs/4.5/components/navs