技术文章 > web前端 > Bootstrap教程
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="//m.sbmmt.com/m/faq/#">Home</a></li> <li><a href="//m.sbmmt.com/m/faq/#">Tutorials</a></li> <li><a href="//m.sbmmt.com/m/faq/#">Practice Editor </a></li> <li><a href="//m.sbmmt.com/m/faq/#">Gallery</a></li> <li><a href="//m.sbmmt.com/m/faq/#">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="//m.sbmmt.com/m/faq/#">Home</a></li> <li><a href="//m.sbmmt.com/m/faq/#">Tutorials</a></li> <li><a href="//m.sbmmt.com/m/faq/#">Practice Editor </a></li> <li><a href="//m.sbmmt.com/m/faq/#">Gallery</a></li> <li><a href="//m.sbmmt.com/m/faq/#">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="//m.sbmmt.com/m/faq/#">Home</a></li> <li><a href="//m.sbmmt.com/m/faq/#">Tutorials</a></li> <li><a href="//m.sbmmt.com/m/faq/#">Practice Editor </a></li> <li><a href="//m.sbmmt.com/m/faq/#">Gallery</a></li> <li><a href="//m.sbmmt.com/m/faq/#">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="//m.sbmmt.com/m/faq/#">Home</a></li> <li><a href="//m.sbmmt.com/m/faq/#">About</a></li> <li><a data-toggle="dropdown" href="//m.sbmmt.com/m/faq/#">FrontEnd<b></b></a> <ul> <li><a href="//m.sbmmt.com/m/faq/#">Twitter Bootstrap</a></li> <li><a href="//m.sbmmt.com/m/faq/#">Google Plus API</a></li> <li><a href="//m.sbmmt.com/m/faq/#">HTML5</a></li> <li></li> <li><a href="//m.sbmmt.com/m/faq/#">Examples</a></li> </ul> </li> <li><a data-toggle="dropdown" href="//m.sbmmt.com/m/faq/#">BackEnd<b class="caret bottom-up"></b></a> <ul class="dropdown-menu bottom-up pull-right"> <li><a href="//m.sbmmt.com/m/faq/#">PHP</a></li> <li><a href="//m.sbmmt.com/m/faq/#">MySQL</a></li> <li><a href="//m.sbmmt.com/m/faq/#">PostgreSQL</a></li> <li></li> <li><a href="//m.sbmmt.com/m/faq/#">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有哪几种导航的详细内容,更多请关注php中文网其它相关文章!
已抢66208个
抢已抢35086个
抢已抢19536个
抢