Bootstrap Tab 选项卡
目录
大多数网页都有很多种菜单。
在 HTML 中，菜单通常先在无序列表 <ul> 中定义（并在之后设置样式），如下所示：:
<ul><li><a href="#">首页</a></li><li><a href="#">菜单 1</a></li><li><a href="#">菜单 2</a></li><li><a href="#">菜单 3</a></li></ul>
如果要将上面列表创建成水平菜单，请将 .list-inline 样式类添加到 <ul>:
<!DOCTYPE html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script src="https://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body><div class="container"><h3>内联列表</h3><ul class="list-inline"><li><a href="#">首页</a></li><li><a href="#">菜单 1</a></li><li><a href="#">菜单 2</a></li><li><a href="#">菜单 3</a></li></ul></div></body></html>
或者你可以在上面的菜单显示为 Bootstrap 的选项卡（见后面部分）。
选项卡（Tabs）
使用 <ul class="nav nav-tabs"> 样式来创建选项卡:
提示: 要指定当前页请添加 <li class="active">。
下面的实例创建导航选项卡:
实例
<!DOCTYPE html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script src="https://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body><div class="container"><h3>Tabs</h3><ul class="nav nav-tabs"><li class="active"><a href="#">首页</a></li><li><a href="#">菜单 1</a></li><li><a href="#">菜单 2</a></li><li><a href="#">菜单 3</a></li></ul><br><p><strong>Note:</strong> 此示例演示如何创建基本导航选项卡。它还不是可切换/动态的（你不能点击链接来显示不同的内容）-请参阅 Bootstrap 选项卡 教程中的最后一个实例，以了解如何做到这一点。</p></div></body></html>
带有下拉选项的 Tab
选项卡还可以保持住下拉菜单。
以下实例将下拉菜单添加到 "菜单 1":
实例
<!DOCTYPE html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script src="https://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body><div class="container"><h3>带有下拉选项的 Tab</h3><ul class="nav nav-tabs"><li data-toggle="tab" class="active"><a href="#">首页</a></li><li data-toggle="tab" class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">菜单 1<span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">子菜单 1-1</a></li><li><a href="#">子菜单 1-2</a></li><li><a href="#">子菜单 1-3</a></li></ul></li><li data-toggle="tab"><a href="#">菜单 2</a></li><li data-toggle="tab"><a href="#">菜单 3</a></li></ul></div></body></html>
Tabs 居中对齐
要居中对齐 Tab 选项卡，只需要添加 .nav-justified 样式。
请注意，在小于 768px 的屏幕上，列表项是堆叠式的（内容将保持居中）:
实例
<!DOCTYPE html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script src="https://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body><div class="container"><h3>Tab 居中对齐</h3><p>要居中对齐 Tab 选项卡，只需要添加 .nav-justified 样式。请注意，在小于 768px 的屏幕上，列表项是堆叠式的（内容将保持居中）</p><ul class="nav nav-tabs nav-justified"><li class="active"><a href="#">首页</a></li><li><a href="#">菜单 1</a></li><li><a href="#">菜单 2</a></li><li><a href="#">菜单 3</a></li></ul></div></body></html>
切换/动态选项卡
首页
主要文本
要使选项卡可切换，请向每个链接添加 data-toggle="tab" 属性。然后为每个选项卡添加 .tab-pane 以及一个唯一 ID，并将它们包裹在一个带有 .tab-content 类的 <div> 元素中。
如果您希望在单击选项卡时有淡入淡出效果，请将 .fade 类添加到 .tab-pane 样式后:
实例
<!DOCTYPE html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script src="https://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body><div class="container"><h2>动态选项卡</h2><p>要使选项卡可切换，请向每个链接添加 data-toggle="tab" 属性。然后为每个选项卡添加 .tab-pane 以及一个唯一 ID，并将它们包裹在一个带有 .tab-content 类的 <div> 元素中。</p><ul class="nav nav-tabs"><li class="active"><a data-toggle="tab" href="#home">首页</a></li><li><a data-toggle="tab" href="#menu1">菜单 1</a></li><li><a data-toggle="tab" href="#menu2">菜单 2</a></li><li><a data-toggle="tab" href="#menu3">菜单 3</a></li></ul><div class="tab-content"><div id="home" class="tab-pane fade in active"><h3>首页</h3><p>首页的内容</p></div><div id="menu1" class="tab-pane fade"><h3>菜单 1</h3><p>菜单 1 的内容</p></div><div id="menu2" class="tab-pane fade"><h3>菜单 2</h3><p>菜单 2 的内容</p></div><div id="menu3" class="tab-pane fade"><h3>菜单 3</h3><p>菜单 3 的内容</p></div></div></div></body></html>
完整的 Bootstrap 导航类参考引用
有关所有导航类的完整参考，请访问本站的 Bootstrap 导航参考。
有关所有选项卡选项、方法和事件的完整参考，请转到本站的 Bootstrap JS 选项卡参考。