.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"
属性。这些仅适用于动态标签界面,如WAI ARIA 创作实践中所述。有关示例,请参阅本节中的动态选项卡界面的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
进行编译。
动态标签的接口,如在所描述的WAI ARIA 创作实践创作实践,需要 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.tab
shown.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
事件不会被触发。
事件类型 | 描述 |
---|---|
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 来分别定位前一个使用的选项卡和新启用的选项卡。 |
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.target // newly activated tab
e.relatedTarget // previous active tab
})