.nav导航/滑动门(nav)

Bootstrap的航组件的使用文档和示例。

基本导航样式

Bootstrap中提供的导航可共享通用标记和样式，从基础.nav样式类到活动与禁用状态。交换class选择符以在每种样式之间切换。

基础.nav组件采用Flexbox弹性布局构建，并为构建所有类型的导航组件提供了坚实的基础，包括一些风格覆盖（以及列表）、一些更大pading连接间隙和基本的禁用样式。

基础的 .nav组件不包含任何的 .active 状态，以下范例包括该类别，主要是为了说明这个class不会触发任何特殊的样式。

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</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 class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

.nav的class 可以使用在很多地方，所以你的标记可以非常灵活，比如使用在 <ul>列表，或者自定义一个 <nav>组件，因为 .nav 基于 display: flex定义，导航链接的行为与导航项目相同，不需要额外的标记。

<nav class="nav">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#">Disabled</a>
</nav>

可用样式

使用通用样式定义 .nav元件，根据需要进行混合搭配、或自行建立。

水平对齐

使用flexbox 通用布局属性更改导航的水平对齐方式，默认情况下，导航按左对齐，但你可以轻松将其改为居中对齐（或右对齐。

用 .justify-content-center居中

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</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 class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

使用 .justify-content-end右对齐：

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</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 class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

垂直排列

使用.flex-column 通用样式更改Flexa弹性项目的方向来设计导航，如在特定的viewport屏幕下需要堆叠，可使用响应式定义（如 .flex-sm-column样式）。

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</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 class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

和往常一样，垂直导航也可以没有 <ul>选择器。

<nav class="nav flex-column">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#">Disabled</a>
</nav>

Tabs标签

从上面了解的基本导航，并加入 .nav-tabs 以生成选项卡标签（滑动门，同时结合 tab JavaScript 插件来构建tabs滑动门。

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</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 class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

胶囊式标签页

HTML标记相同，但使用 .nav-pills 替代

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</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 class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

填充和对齐

.nav内容有两种扩展class属性， 使用.nav-fill会将 .nav-item按照比例分配空间。注意：这会占用所有的水平空间，但不是每个导航项目的宽度相同。

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

当使用<nav>基于导航时，请确保包含 .nav-item 在A链接上。

<nav class="nav nav-pills nav-fill">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link disabled" href="#">Disabled</a>
</nav>

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

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#">Disabled</a>
</nav>

与 .nav-fill的例子近似，使用基于 <nav>的导航，确保在链接上包含 .nav-item 子项定义。

<nav class="nav nav-pills nav-justified">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link disabled" href="#">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" href="#">Active</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
  <a class="flex-sm-fill text-sm-center nav-link disabled" href="#">Disabled</a>
</nav>

无障碍易用性处理

如果您正在使用导航栏提供导航栏，请确保添加a role="navigation"到最合理的<ul>父容器，或者<nav>围绕整个导航包装元素。不要为<ul>自己添加角色，因为这将阻止它被辅助技术公布为实际列表。

请注意，导航栏，即使视觉样式为.nav-tabs类的选项卡，也不应该给出role="tablist"、role="tab"或role="tabpanel"属性。这些仅适用于动态标签界面，如WAIARIA 创作实践中所述。有关示例，请参阅本节中的动态选项卡界面的JavaScript章节。

使用下拉菜单

添加一些额外的HTML和下拉列表JavaScript插件的下拉菜单。

带下拉列表的标签页

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

带下拉列表的胶囊式标签页

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

JavaScript 行为/滑动门

使用JavaScript标签页插件，单元包含或通过编译 bootstrap.js 文件来扩展我们的标签和按钮，以创建可选的选项卡、甚至是下拉菜单。

如果你需要从源码构建JS，则需要 包含 util.js进行编译。

动态标签的接口，如在所描述的WAIARIA 创作实践创作实践，需要 role="tablist"、role="tab"、 role="tabpanel"、和附加 aria- 避税性，从而向用户提供辅助技术（如屏幕阅读器）结构、功能及状态反馈。

注意动态选项卡式界面不包含下拉菜单，因为这会导致可用性和可访问性问题。从可用性的角度来看，当前显示的选项卡的触发器元素不会立即可见（因为它在封闭的下拉菜单中）可能会导致混淆。从可访问性的角度来看，目前还没有明确的方式将这种结构映射到标准的WAI ARIA模式，这意味着它不能容易地被用户辅助技术所理解。

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <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="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

如上所示，即可以使用<ul>标记，也可以基于 <nav>标签设计。上面案例是基于<ul>容器的选项卡（滑动门），下面案例是基于<nav>容器的选项卡（滑动门）：

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
    <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
  </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">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

选项卡（滑动门）组件也适用于胶囊式导航样式。

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
  </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">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>

还可以做成垂直形式：

<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
  <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
  <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
  <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
  <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
</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">...</div>
  <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
  <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
  <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
</div>

使用数据属性

只要在远素上指定data-toggle="tab" 或 data-toggle="pill" 即可启动选项卡或胶囊式导航，而无需编写任何JavaScrip，并可在 .nav-tabs 或 .nav-pills使用这些数据属性。

<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </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启用可选标签（每个选项卡需要单独激活）:

$('#myTab a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

可以通过以下几种方式激活标签：

$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child a').tab('show') // Select first tab
$('#myTab li:last-child a').tab('show') // Select last tab
$('#myTab li:nth-child(3) a').tab('show') // Select third tab

Fade 淡入淡出

要使标签淡入淡出，请添加.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方法都支持异步传输，且一旦 转换开始，在结束之前它们会返回给调用者，直到完成这个动画。另外， 过渡组件上的方法将被忽略。

请参阅JavaScript文档以了解更多信息。

$().tab标签

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

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </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>
  $(function () {
    $('#myTab li:last-child a').tab('show')
  })
</script>

.tab(‘show’)事件

选择给定的选项卡并显示其关联的窗格。之前选择的任何其他选项卡将被取消选中，并且其关联的窗格将被隐藏、在选项卡窗格实际显示之前（即在shown.bs.tabshown.bs.tab事件发生之前）返回到调用者。

$('#someTab').tab('show')

.tab(‘dispose’)

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

事件

When showing a new tab, the events fire in the following order:

• hide.bs.tab (当前被激活的分页标签上。
• show.bs.tab 特显示的分页标签上）
• hidden.bs.tab (在上一启动的标签选项卡上，与 hide.bs.tab 事件相同。
• shown.bs.tab (在刚刚显示的标签先项卡上，与 show.bs.tab 事件相同。
  如果没有选项卡标签已经启劝，那么 hide.bs.tab 和 hidden.bs.tab 事件不会被触发。

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})