Bootstrap 胶囊式菜单（Pill）
胶囊式菜单
使用 <ul class="nav nav-pills"> 来创建胶囊式菜单，同时指定当前页面可以添加 <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"></head><body><div class="container"><h3>胶囊式菜单</h3><ul class="nav nav-pills"><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>
垂直胶囊式菜单
胶囊式菜单也可以垂直显示，只需要添加 .nav-stacked 类:
实例
<!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><p>使用 .nav-stacked 来垂直显示菜单:</p><ul class="nav nav-pills nav-stacked"><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>
在一行中显示垂直胶囊式菜单
文本…
文本…
文本…
下面的实例将垂直胶囊式菜单放置在最后一列中。因此，在大屏幕上，菜单将显示在右侧。但在小屏幕上，内容会自动调整为单列布局:
实例
<!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><div class="row"><div class="col-md-3"><p>一些文本</p></div><div class="col-md-3"><p>一些文本</p></div><div class="col-md-3"><p>一些文本</p></div><div class="col-md-3"><ul class="nav nav-pills nav-stacked"><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><div class="clearfix visible-lg"></div></div></div></body></html>
胶囊式下拉菜单
胶囊式菜单也能保持住下拉选项。
下面的实例将下拉选项添加到 "菜单 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>胶囊式下拉菜单</h3><ul class="nav nav-pills nav-stacked"><li class="active"><a href="#">首页</a></li><li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">菜单 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><a href="#">菜单 2</a></li><li><a href="#">菜单 3</a></li></ul></div></body></html>
胶囊式菜单居中对齐
要居中对齐 Pills 胶囊式菜单，只需要添加 .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>胶囊式菜单居中对齐</h3><ul class="nav nav-pills 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="pill" 属性。然后为每个选项卡添加 .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="pill" 属性。然后为每个选项卡添加 .tab-pane 以及一个唯一 ID，并将它们包裹在一个带有 .tab-content 类的 <div> 元素中</p><ul class="nav nav-pills"><li class="active"><a data-toggle="pill" href="#home">首页</a></li><li><a data-toggle="pill" href="#menu1">菜单 1</a></li><li><a data-toggle="pill" href="#menu2">菜单 2</a></li><li><a data-toggle="pill" 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>菜单 2 的内容</p></div></div></div></body></html>
完整的 Bootstrap 导航类参考引用
有关所有导航类的完整参考，请访问本站的 Bootstrap 导航参考。
有关所有选项卡选项、方法和事件的完整参考，请转到本站的 Bootstrap JS 选项卡参考。