.nav导航/滑动门(nav)

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

基本导航样式

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

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

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

导航滑动门(Nav) - 图1

  1. <ul class="nav">
  2. <li class="nav-item">
  3. <a class="nav-link active" href="#">Active</a>
  4. </li>
  5. <li class="nav-item">
  6. <a class="nav-link" href="#">Link</a>
  7. </li>
  8. <li class="nav-item">
  9. <a class="nav-link" href="#">Link</a>
  10. </li>
  11. <li class="nav-item">
  12. <a class="nav-link disabled" href="#">Disabled</a>
  13. </li>
  14. </ul>

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

导航滑动门(Nav) - 图2

  1. <nav class="nav">
  2. <a class="nav-link active" href="#">Active</a>
  3. <a class="nav-link" href="#">Link</a>
  4. <a class="nav-link" href="#">Link</a>
  5. <a class="nav-link disabled" href="#">Disabled</a>
  6. </nav>

可用样式

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

水平对齐

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

.justify-content-center居中

导航滑动门(Nav) - 图3

  1. <ul class="nav justify-content-center">
  2. <li class="nav-item">
  3. <a class="nav-link active" href="#">Active</a>
  4. </li>
  5. <li class="nav-item">
  6. <a class="nav-link" href="#">Link</a>
  7. </li>
  8. <li class="nav-item">
  9. <a class="nav-link" href="#">Link</a>
  10. </li>
  11. <li class="nav-item">
  12. <a class="nav-link disabled" href="#">Disabled</a>
  13. </li>
  14. </ul>

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

导航滑动门(Nav) - 图4

  1. <ul class="nav justify-content-end">
  2. <li class="nav-item">
  3. <a class="nav-link active" href="#">Active</a>
  4. </li>
  5. <li class="nav-item">
  6. <a class="nav-link" href="#">Link</a>
  7. </li>
  8. <li class="nav-item">
  9. <a class="nav-link" href="#">Link</a>
  10. </li>
  11. <li class="nav-item">
  12. <a class="nav-link disabled" href="#">Disabled</a>
  13. </li>
  14. </ul>

垂直排列

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

导航滑动门(Nav) - 图5

  1. <ul class="nav flex-column">
  2. <li class="nav-item">
  3. <a class="nav-link active" href="#">Active</a>
  4. </li>
  5. <li class="nav-item">
  6. <a class="nav-link" href="#">Link</a>
  7. </li>
  8. <li class="nav-item">
  9. <a class="nav-link" href="#">Link</a>
  10. </li>
  11. <li class="nav-item">
  12. <a class="nav-link disabled" href="#">Disabled</a>
  13. </li>
  14. </ul>

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

导航滑动门(Nav) - 图6

  1. <nav class="nav flex-column">
  2. <a class="nav-link active" href="#">Active</a>
  3. <a class="nav-link" href="#">Link</a>
  4. <a class="nav-link" href="#">Link</a>
  5. <a class="nav-link disabled" href="#">Disabled</a>
  6. </nav>

Tabs标签

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

导航滑动门(Nav) - 图7

  1. <ul class="nav nav-tabs">
  2. <li class="nav-item">
  3. <a class="nav-link active" href="#">Active</a>
  4. </li>
  5. <li class="nav-item">
  6. <a class="nav-link" href="#">Link</a>
  7. </li>
  8. <li class="nav-item">
  9. <a class="nav-link" href="#">Link</a>
  10. </li>
  11. <li class="nav-item">
  12. <a class="nav-link disabled" href="#">Disabled</a>
  13. </li>
  14. </ul>

胶囊式标签页

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

导航滑动门(Nav) - 图8

  1. <ul class="nav nav-pills">
  2. <li class="nav-item">
  3. <a class="nav-link active" href="#">Active</a>
  4. </li>
  5. <li class="nav-item">
  6. <a class="nav-link" href="#">Link</a>
  7. </li>
  8. <li class="nav-item">
  9. <a class="nav-link" href="#">Link</a>
  10. </li>
  11. <li class="nav-item">
  12. <a class="nav-link disabled" href="#">Disabled</a>
  13. </li>
  14. </ul>

填充和对齐

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

导航滑动门(Nav) - 图9

  1. <ul class="nav nav-pills nav-fill">
  2. <li class="nav-item">
  3. <a class="nav-link active" href="#">Active</a>
  4. </li>
  5. <li class="nav-item">
  6. <a class="nav-link" href="#">Longer nav link</a>
  7. </li>
  8. <li class="nav-item">
  9. <a class="nav-link" href="#">Link</a>
  10. </li>
  11. <li class="nav-item">
  12. <a class="nav-link disabled" href="#">Disabled</a>
  13. </li>
  14. </ul>

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

导航滑动门(Nav) - 图10

  1. <nav class="nav nav-pills nav-fill">
  2. <a class="nav-item nav-link active" href="#">Active</a>
  3. <a class="nav-item nav-link" href="#">Link</a>
  4. <a class="nav-item nav-link" href="#">Link</a>
  5. <a class="nav-item nav-link disabled" href="#">Disabled</a>
  6. </nav>

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

导航滑动门(Nav) - 图11

  1. <nav class="nav nav-pills nav-justified">
  2. <a class="nav-link active" href="#">Active</a>
  3. <a class="nav-link" href="#">Longer nav link</a>
  4. <a class="nav-link" href="#">Link</a>
  5. <a class="nav-link disabled" href="#">Disabled</a>
  6. </nav>

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

导航滑动门(Nav) - 图12

  1. <nav class="nav nav-pills nav-justified">
  2. <a class="nav-item nav-link active" href="#">Active</a>
  3. <a class="nav-item nav-link" href="#">Link</a>
  4. <a class="nav-item nav-link" href="#">Link</a>
  5. <a class="nav-item nav-link disabled" href="#">Disabled</a>
  6. </nav>

使用Flex弹性布局

如果需要吊牌应式的导航变化,请使用一系列的 flexbox 弹性布局类别,这结通用类别能提供不同的弹性布局,下厕所示例中,我们的导及将会堆叠在最小的屏幕标准上,然后从小断点开始填充可用宽度的水平布局。

导航滑动门(Nav) - 图13

  1. <nav class="nav nav-pills flex-column flex-sm-row">
  2. <a class="flex-sm-fill text-sm-center nav-link active" href="#">Active</a>
  3. <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
  4. <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
  5. <a class="flex-sm-fill text-sm-center nav-link disabled" href="#">Disabled</a>
  6. </nav>

无障碍易用性处理

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

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

使用下拉菜单

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

带下拉列表的标签页

导航滑动门(Nav) - 图14

  1. <ul class="nav nav-tabs">
  2. <li class="nav-item">
  3. <a class="nav-link active" href="#">Active</a>
  4. </li>
  5. <li class="nav-item dropdown">
  6. <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
  7. <div class="dropdown-menu">
  8. <a class="dropdown-item" href="#">Action</a>
  9. <a class="dropdown-item" href="#">Another action</a>
  10. <a class="dropdown-item" href="#">Something else here</a>
  11. <div class="dropdown-divider"></div>
  12. <a class="dropdown-item" href="#">Separated link</a>
  13. </div>
  14. </li>
  15. <li class="nav-item">
  16. <a class="nav-link" href="#">Link</a>
  17. </li>
  18. <li class="nav-item">
  19. <a class="nav-link disabled" href="#">Disabled</a>
  20. </li>
  21. </ul>

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

导航滑动门(Nav) - 图15

  1. <ul class="nav nav-pills">
  2. <li class="nav-item">
  3. <a class="nav-link active" href="#">Active</a>
  4. </li>
  5. <li class="nav-item dropdown">
  6. <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
  7. <div class="dropdown-menu">
  8. <a class="dropdown-item" href="#">Action</a>
  9. <a class="dropdown-item" href="#">Another action</a>
  10. <a class="dropdown-item" href="#">Something else here</a>
  11. <div class="dropdown-divider"></div>
  12. <a class="dropdown-item" href="#">Separated link</a>
  13. </div>
  14. </li>
  15. <li class="nav-item">
  16. <a class="nav-link" href="#">Link</a>
  17. </li>
  18. <li class="nav-item">
  19. <a class="nav-link disabled" href="#">Disabled</a>
  20. </li>
  21. </ul>

JavaScript 行为/滑动门

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

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

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

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

导航滑动门(Nav) - 图16

  1. <ul class="nav nav-tabs" id="myTab" role="tablist">
  2. <li class="nav-item">
  3. <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  4. </li>
  5. <li class="nav-item">
  6. <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  7. </li>
  8. <li class="nav-item">
  9. <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  10. </li>
  11. </ul>
  12. <div class="tab-content" id="myTabContent">
  13. <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  14. <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  15. <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
  16. </div>

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

导航滑动门(Nav) - 图17

  1. <nav>
  2. <div class="nav nav-tabs" id="nav-tab" role="tablist">
  3. <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>
  4. <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>
  5. <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>
  6. </div>
  7. </nav>
  8. <div class="tab-content" id="nav-tabContent">
  9. <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  10. <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  11. <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
  12. </div>

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

导航滑动门(Nav) - 图18

  1. <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  2. <li class="nav-item">
  3. <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>
  4. </li>
  5. <li class="nav-item">
  6. <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>
  7. </li>
  8. <li class="nav-item">
  9. <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>
  10. </li>
  11. </ul>
  12. <div class="tab-content" id="pills-tabContent">
  13. <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
  14. <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
  15. <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
  16. </div>

还可以做成垂直形式:

导航滑动门(Nav) - 图19

  1. <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
  2. <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>
  3. <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>
  4. <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>
  5. <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>
  6. </div>
  7. <div class="tab-content" id="v-pills-tabContent">
  8. <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
  9. <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
  10. <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
  11. <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
  12. </div>

使用数据属性

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

  1. <!-- Nav tabs -->
  2. <ul class="nav nav-tabs" id="myTab" role="tablist">
  3. <li class="nav-item">
  4. <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  5. </li>
  6. <li class="nav-item">
  7. <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  8. </li>
  9. <li class="nav-item">
  10. <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  11. </li>
  12. <li class="nav-item">
  13. <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  14. </li>
  15. </ul>
  16. <!-- Tab panes -->
  17. <div class="tab-content">
  18. <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  19. <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  20. <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  21. <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
  22. </div>

通过 JavaScript

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

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

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

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

Fade 淡入淡出

要使标签淡入淡出,请添加.fade 到每个. .tab-pane,第一个选项卡窗格还必须定义.show 使默认初始内容可见。

  1. <div class="tab-content">
  2. <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  3. <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  4. <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  5. <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
  6. </div>

方法

异步传输与转换

所有的API方法都支持异步传输,且一旦 转换开始,在结束之前它们会返回给调用者,直到完成这个动画。另外, 过渡组件上的方法将被忽略。

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

$().tab标签

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

  1. <ul class="nav nav-tabs" id="myTab" role="tablist">
  2. <li class="nav-item">
  3. <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  4. </li>
  5. <li class="nav-item">
  6. <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  7. </li>
  8. <li class="nav-item">
  9. <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  10. </li>
  11. <li class="nav-item">
  12. <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  13. </li>
  14. </ul>
  15. <div class="tab-content">
  16. <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  17. <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  18. <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  19. <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
  20. </div>
  21. <script>
  22. $(function () {
  23. $('#myTab li:last-child a').tab('show')
  24. })
  25. </script>

.tab(‘show’)事件

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

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

.tab(‘dispose’)

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

事件

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

  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 来分别定位前一个使用的选项卡和新启用的选项卡。
  1. $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  2. e.target // newly activated tab
  3. e.relatedTarget // previous active tab
  4. })