bootstrap可以创建多种导航，包括：基本的基于标签和胶囊式标签的导航、堆叠的或垂直的基于标签和胶囊式标签的导航、基于标签和胶囊式标签的下拉菜单、使用导航列表创建堆叠导航、使用 javascript 创建可点击导航（不同的方向）。
基本的标签（推荐学习：bootstrap视频教程）
两个 css class .nav 和 .nav-tabs 用于创建基本的基于标签的导航。在 bootstrap 版本 v2.0.1 中，css class .nav 的样式在行号 2176 到 2220（这里也包含一些相关样式）中声明。行号 2222 到 2267 包含 .nav-tabs 的样式。
下面的实例演示如何使用 bootstrap 创建一个基本的基于标签的导航。
<div class="container"> <div class="row"> <div class="span6"> <ul class="nav nav-tabs"> <li class="active"><a href="#">home</a></li> <li><a href="#">tutorials</a></li> <li><a href="#">practice editor </a></li> <li><a href="#">gallery</a></li> <li><a href="#">contact</a></li> </ul> </div> </div></div>
基本的胶囊式标签
一旦您知道如何通过 bootstrap 创建基本的基于标签的导航，要想创建基本的基于胶囊式标签的导航就显得很容易了。在这里不是使用 .nav-tabs class，而是使用 .nav-pills class。.nav-pills 的样式位于 bootstrap.css 中的行号 2222 到 2224，在 bootstrap.css 中的行号 2268 到 2280 再次重复（在最后一个实例中使用到）。
下面的实例演示如何创建一个基本的基于胶囊式标签的导航。
bootstrap 基本的基于胶囊式标签的导航实例
<div class="container"> <div class="row"> <div class="span8"> <ul class="nav nav-pills"> <li class="active"><a href="#">home</a></li> <li><a href="#">tutorials</a></li> <li><a href="#">practice editor </a></li> <li><a href="#">gallery</a></li> <li><a href="#">contact</a></li> </ul> </div> </div></div>
堆叠的或垂直的标签
如需创建堆叠的或垂直的基于标签的导航，您必须添加 .nav-stacked、.nav 和 .nav-tabs class 到您的标记中，默认是创建水平的基于标签的导航。从行号 2281 到 2309 包含了 .nav-stacked 的样式。下面是一个实例。
bootstrap 堆叠的或垂直的基于标签的导航实例
<div class="container"> <div class="row"> <div class="span8"> <ul class="nav nav-tabs nav-stacked"> <li class="active"><a href="#">home</a></li> <li><a href="#">tutorials</a></li> <li><a href="#">practice editor </a></li> <li><a href="#">gallery</a></li> <li><a href="#">contact</a></li> </ul> </div> </div></div>
基于标签的下拉菜单
您可以使用 bootstrap 创建基于标签的下拉菜单导航。这里有四个 css class - .dropdown、.dropdown-toggle、.dropdown-menu 和 .caret，是您所需要的，另外还有 .nav 和 .nav-tabs class。在 bootstrap.css（版本 2.0.1）中，行号 1545 到 1547 包含了 .dropdown class 的样式，行号 1548 到 1553 包含了 .dropdown-toggle 的样式，行号 1576 到 1632 包含了 .dropdown-menu 的样式，行号 1554 到 1575 包含了 .caret 的样式。在演示实例中，也使用了另一个 css class .divider，但不是必需的。
当然，您需要在 html 文件中引用三个 javascript 文件 - jquery.js、bootstrap-dropdown.js 和 application.js。所有这些都位于 docs/assets/js/ 文件夹内。
下面是一个实例。
bootstrap 基于标签的下拉菜单的导航实例
<!doctype html> <html><head> <meta charset="utf-8"> <title>bootstrap 基于标签的下拉菜单的导航实例</title> <meta name="description" content="bootstrap 基于标签的下拉菜单的导航实例"> <link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap2.2.css" rel="stylesheet"> <style type="text/css"> .container { margin-top: 200px; } </style></head><body><div> <div> <div> <ul class="nav nav-tabs"> <li><a href="#">home</a></li> <li><a href="#">about</a></li> <li><a data-toggle="dropdown" href="#">frontend<b></b></a> <ul> <li><a href="#">twitter bootstrap</a></li> <li><a href="#">google plus api</a></li> <li><a href="#">html5</a></li> <li></li> <li><a href="#">examples</a></li> </ul> </li> <li><a data-toggle="dropdown" href="#">backend<b class="caret bottom-up"></b></a> <ul class="dropdown-menu bottom-up pull-right"> <li><a href="#">php</a></li> <li><a href="#">mysql</a></li> <li><a href="#">postgresql</a></li> <li></li> <li><a href="#">live demos</a></li> </ul> </li> </ul> </div> </div></div><script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script><script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"></script><script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/application.js"></script></body></html>
更多bootstrap相关技术文章，请访问bootstrap教程栏目进行学习！
以上就是bootstrap有哪几种导航的详细内容。