Bootstrap组件学习之导航和导航条

导航

Bootstrap提供灵活、多样的导航组件，允许使用相同的标签、不同的类，实现不同风格的导航样式，具有非常高的可定制行。所有的导航组件，包括标签页、pills、导航列表标签，都必须使用nav类实现基础的导航效果。

设计导航组件

所有的导航组件都具有相同的结构，并共用一个样式类nav。其基本结构代码如下：

<ul class="nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">导航标签1</a></li>
<li><a href="#">导航标签2</a></li>
</ul>

效果如图：



列表结构是标准结构中的最核心组件之一，不管从语义角度分析，还是从表现层控制角度分析，使用列表结构来显示信息都是最佳选择，因此Bootstrap导航组件也是以列表结构为基础进行设计的。

设计标签页

<ul class="nav nav-tabs">
<li class="active"><a href="#">首页</a>
<li><a href="#">导航标签1</a></li>
<li><a href="#">导航标签2</a></li>
</ul>

效果如图：

设计pills导航

<ul class="nav nav-pills">
<li class="active"><a href="#">首页</a>
<li><a href="#">导航标签1</a></li>
<li><a href="#">导航标签2</a></li>
</ul>

效果如图：

设置导航选项

设置导航对齐方式

pull-left和pull-right是Bootstrap提供的两个通用工具类，分别定义向左对齐和向右对齐。

.pull-right{
float:right;
}
.pull-left{
float:left;
}

在导航结构中，我们同样可以使用pull-left和pull-right工具类对齐导航链接。

<ul class="nav nav-tabs pull-right">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">导航标签1</a></li>
<li><a href="#">导航标签2</a></li>
</ul>

设计禁用项

针对导航结构来说，不可用选项效果以浅灰色字体表示，同时当鼠标经过或者激活时，样式不会发生变化，其样式代码如下：

.nav> .disabled> a{
color:#999999;
}
.nav> .disabled > a:hover,
.nav> .disabled > a:focus{
text-dexoration:none;
cursor:default;
background-color:transparent;
}

例如，在下面结构中，为标签页中第二个选项添加disabled样式类，设计该项为不可用状态。

<ul class="nav nav-tabs">
<li class="active"><a href="#">首页</a>
<li class="disabled"><a href="#">导航标签1</a></li>
<li><a href="#">导航标签2</a></li>
</ul>

效果如图：

设计堆叠效果

导航组件在默认状态下是水平显示的，如果添加一个nav-stacked样式类即可让组件以堆叠式进行排列，即恢复列表结构的默认垂直方式显示。

.nav-stacked > li{
float:none;
}

为标签页结构添加nav-stacked样式类

<ul class="nav nav-tabs nav-stacked">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">导航标签1</a></li>
<li><a href="#">导航标签2</a></li>
</ul>

绑定导航和下拉菜单

下拉菜单（dropdown）是一个独立的组件，它可以与页面中的任何元素（如按钮、导航等）捆绑使用。

在操作之前，应该先导入下拉菜单的javascript插件，同时导入jQuery库文件。

设计标签页下拉菜单

在标签页选项中，包含一个下拉菜单结构，然后为标签项添加dropdown类，为下拉菜单结构添加dropdown-menu。最后，在标签项的超链接中绑定激活属性data-toggle=”dropdown”，整个效果就设计完毕。例

<ul class="nav nav-tabs">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">微客</a></li>
<li class="dropdown"><a href="#" data-toggle="dropdown">微博<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
<li><a href="#">退出</a></li>
</ul>
</li>
</ul>

设计导航列表

导航列表是一种简洁式导航样式，与标签页、pills下拉菜单具有相同列表结构，只要引入nav-list样式类即可。例如，针对标签页中的示例结构，把

<ul class="nav nav-tabs">

修改为

<ul class="nav nav-list">

,即可定义一个导航列表。

激活标签页

激活标签页就是让标签页每个Tab项能够自由切换，并能够控制Tab项目对应内容框的显示和隐藏。具体方法如下：

第一步：小用到jQuery插件的支持，导入bootstrap-tab.js文件。

第二步：在标签页结构的基础上，添加内容包含框，通过tab-content定义包含框为标签页的内容显示框。在内容包含框中插入与标签页结构对应的多个子内容框，并使用tab-pane进行定义。

第三步：为每个内容框定义id值，并在标签列表项中为每个超链接绑定锚连接。

第四步：为每个标签项超链接定义data-toggle=”tab”属性，激活标签页的交互行为。完成的代码如下：

<div>
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">首页</a></li>
<li><a href="#tab2" data-toggle="tab">微客</a></li>
<li><a href="#tab3" data-toggle="tab">微博</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane active">首页框内容</div>
<div id="tab2" class="tab-pane">微客框内容</div>
<div id="tab3" class="tab-pane">微博框内容</div>
</div>

设计标签页布局

Bootstrap整合了4中标签页布局样式：top（默认）、right、bottom和left。要设计标签页布局，向标签页组件包含框中添加标签页布局类即可。

<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">首页</a></li>
<li><a href="#tab2" data-toggle="tab">微客</a></li>
<li><a href="#tab3" data-toggle="tab">微博</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane active">首页框内容</div>
<div id="tab2" class="tab-pane">微客框内容</div>
<div id="tab3" class="tab-pane">微博框内容</div>
</div>

导航条

对导航组件进行适当包装，即可设计导航条。导航条是网页设计中不可缺少的部分，是整个网站的控制中枢，在每个页面都会看见它，因此如何设计导航就称为网页设计中很关键的一步。它可以帮助用户很方便地访问所需的内容，是浏览网站时从一个页面转到另一个页面的快速通道。

设计导航条

导航条是一个长条形区块，其中可以包含导航或按钮，以方便用户执行导航操作。Bootstrap配合使用navbar和navbar-inner类定义导航条包含框，此时的导航条是一个空白区域。

<div class="navbar">
<div class="navbar-inner">
</div>
</div>

在导航条中包含导航结构，就可以设计更使用的导航效果：

<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">微客</a></li>
<li><a href="#">微博</a></li>
</ul>
</div>
</div>

在默认情况下，导航条是静态的（static），不是定位显示的（fixed、absolute）。

完成的导航条一般包含项目（或网站）名称和导航项。项目名称使用brand样式类进行设计，一般位于导航条的左侧。例如，在下面代码中通过

<a class="brand">

为导航条添加一个网站的表示名称。

<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">网站名称</a>
<ul class="nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">微客</a></li>
<li><a href="#">微博</a></li>
</ul>
</div>
</div>

如果将导航条放入container包含框中，可以限制导航条的宽度，默认为960像素。

绑定表单和下拉菜单

在Bootstrap中，导航条被视为一个容器，可以包含导航组件，也可以包含表单或者下拉菜单。

设计表单导航

如果希望在导航条中放置一个表单，需要为表单框添加navbar-form样式类，同时设置对齐方式（如pull-left或pull-right）。

例如，设计一个提交表单，并把它放置于导航条中。

<div class="navbar">
<div class="navbar-inner">
<form class="navbar-form pull-right">
<input type="text" class="span3">
<input type="text" class="btn span1" value="提交">
</form>
</div>
</div>

设计下拉菜单导航条

在操作之前，应先导入下拉菜单JavaScript插件，同时导入jQuery库文件。

然后在导航条包含框中添加下拉菜单结构，设计一个简单的导航条下拉菜单，代码如下：

<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="dropdown"><a href="#" data-toggle="dropdown">微博<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
<li><a href="#">退出</a></li>
</ul>
</li>
</ul>
</div>
</div>

导航条和布局

导航条可以在页面中进行固定布局，如固定显示在浏览器窗口的顶部或者底部。

置顶导航条

为导航条外包含框添加navbar-fixed-top类，就可以让导航条置顶显示。

<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
</div>
</div>

置底导航条

同理，为导航条的外包含框添加navbar-fixed-bottom类。