很多时候，我们常把下拉菜单和普通的按钮组排列在一起，实现类似于导航菜单的效果。使用Bootstrap按钮的嵌套分组的时候，只需要把当初制作下拉菜单的“dropdown”的容器换成“btn-group”，并且和普通的按钮放在同一级。如下所示：
<!--省略部分如3中代码--> ... <div> <button type="button">首页</button> <div> <button data-toggle="dropdown" type="button">移动开发<span></span></button> <ul> <li><a href="##">Android</a></li> <li><a href="##">IOS</a></li> </ul> </div> <button type="button">Java Web开发</button> <button type="button">PHP开发</button> <button type="button">大数据</button> </div> ...
效果图如下：
在实际运用当中，总会碰到垂直显示的效果。在Bootstrap中也提供了这样的风格。我们只需要把水平分组的“btn-group”类名换成“btn-group-vertical”即可实现按钮的垂直分组。
5.按钮-等分按钮
等分按钮（自适应分组按钮）实现方法也非常的简单，只需要在按钮组“btn-group”上追加一个“btn-group-justified”类名，如下所示：
<div> <a href="#">三分之一</a> <a href="#">三分之一</a> <a href="#">三分之一</a> </div>
效果图如下：
6.导航-基本用法
Bootstrap中制作导航条主要通过“.nav”样式。.nav”必须附加另外一个样式才会有效，比如“nav-tabs”、“nav-pills”之类。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>导航-基本用法</title> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <!--css样式--> <style > body{margin:30px;padding:30px;} </style> </head> <body> <ul> <li><a href="##">首页</a></li> <li><a href="##">新闻</a></li> <li><a href="##">博客</a></li> <!--标签形tab导航--> <li><a href="##">论坛</a></li> <!--禁用状态--> <li><a href="##">反馈</a></li> </ul> <!-- 放置在文档的结尾，使页面加载速度更快 --> <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery --> <script src="https://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script> <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用 --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>
效果图如下：
7.导航-胶囊形(pills)导航
胶囊形（pills）导航，当前项高亮显示，并带有圆角效果。只需要把类名“nav-tabs”换成“nav-pills”即可：