- Bootstrap Web设计与开发实战
- 杨旺功
- 711字
- 2020-11-28 16:39:15
5.5 Bootstrap导航条
本节介绍Bootstrap框架的导航条组件，在Bootstrap框架中所有导航条组件均使用．navbar类来实现，针对不同类型的导航条再增加相应的样式即可。
5.5.1 默认样式导航条
导航条的默认样式是静态（stalic）形式的，通常包含一个标题（title）名称和一组导航项，下面看一段代码示例。
【代码5-17】是一个默认样式标签导航的设计（详见源代码ch05目录中ch05.basicNavbar.html文件）：
01 <div class="bs-docs-example">
02 <div class="navbar">
03 <div class="navbar-inner">
04 <a class="brand" href="#">导航条</a>
05 <ul class="nav">
06 <li class="active"><a href="#">首页</a></li>
07 <li><a href="#">新闻</a></li>
08 <li><a href="#">财经</a></li>
09 <li><a href="#">体育</a></li>
10 <li><a href="#">论坛</a></li>
11 </ul>
12 </div>
13 </div>
14 </div>
【代码5-17】中第02～13行代码通过．navbar类定义了一个导航条；第04行代码通过．brand类定义导航条标题，页面效果如图5.17所示。
图5.17 默认样式导航条
5.5.2 导航条表单
可以在导航条中通过<form>标签添加表单，该表单中可以包括输入框、按钮、搜索等元素，下面看一段代码示例。
【代码5-18】是一个导航条表单的设计（详见源代码ch05目录中ch05.formNavbar.html文件）：
01 <div class="bs-docs-example">
02 <div class="navbar">
03 <div class="navbar-inner">
04 <a class="brand" href="#">提交</a>
05 <form class="navbar-form pull-left">
06 <input type="text" class="span2">
07 <button type="submit" class="btn">Submit</button>
08 </form>
09 </div>
10 </div>
11 </div>
12 <div class="bs-docs-example">
13 <div class="navbar">
14 <div class="navbar-inner">
15 <a class="brand" href="#">搜索</a>
16 <form class="navbar-search pull-left">
17 <input type="text" class="search-query"
placeholder="Search">
18 </form>
19 </div>
20 </div>
21 </div>
【代码5-18】中通过<form>标签定义两个表单条，一个是提交表单条，另一个搜索表单条，页面效果如图5.18所示。
图5.18 导航条表单
5.5.3 响应式导航条
响应式导航条可以实现交互功能，要实现一个响应式导航条，需要把导航条包含在．nav-collapse类和．collapse类中，并向其中添加一个．btn-navbar类的触发按钮。下面看一段代码示例。
【代码5-19 】是一个响应式导航条的设计（详见源代码ch05目录中ch05.responsiveNavbar.html文件）：
01 <div class="bs-docs-example">
02 <div class="navbar">
03 <div class="navbar-inner">
04 <div class="container">
05 <a class="btn btn-navbar" data-toggle="collapse" data-
target=".navbar-responsive-collapse">
06 <span class="icon-bar"></span>
07 <span class="icon-bar"></span>
08 <span class="icon-bar"></span>
09 </a>
10 <a class="brand" href="#">响应式导航条</a>
11 <div class="nav-collapse collapse navbar-responsive-
collapse">
12 <ul class="nav">
13 <li class="active"><a href="#">首页</a></li>
14 <li><a href="#">导航条</a></li>
15 <li class="dropdown">
16 <a href="#" class="dropdown-toggle" data-
toggle="dropdown">下拉导航条<b class="caret"></b></a>
17 <ul class="dropdown-menu">
18 <li><a href="#">导航条</a></li>
19 <li><a href="#">导航条</a></li>
20 <li class="divider"></li>
21 <li class="nav-header">导航条</li>
22 <li><a href="#">导航条</a></li>
23 </ul>
24 </li>
25 </ul>
26 <form class="navbar-search pull-left" action="">
27 <input type="text" class="search-query span2"
placeholder="Search">
28 </form>
29 </div><! -- /.nav-collapse -->
30 </div>
31 </div><! -- /navbar-inner -->
32 </div><! -- /navbar -->
33 </div>
关于【代码5-19】的分析如下：
第05～09行代码通过为<a>标签添加．btn-navbar类定义了一个触发按钮。
第11～29行代码通过．nav-collapse类和．collapse类定义了一个导航条。
【代码5-19】页面的初始效果如图5.19所示。
图5.19 响应式导航条（一）
我们点击一下导航条右侧的触发按钮，页面的效果如图5.20所示。
图5.20 响应式导航条（二）