四、Bootstrap组件设计

3、Bootstrap导航

    Bootstrap框架的导航组件，均使用.nav类来实现。

    默认标签导航

        默认标签导航是基于<ul><li>标签组并应用.nav-tabs类设计而成的。

<section id="global">
<div class="page-header">
<h3>Bootstrap组件 - 默认标签导航</h3>
</div>
</section>
<div class="bs-docs-example">
<ul class="nav nav-tabs">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">财经</a></li>
<li><a href="#">体育</a></li>
<li><a href="#">论坛</a></li>
</ul>
</div>
</div>

pills标签导航

pills标签导航是基于<ul><li>标签组并应用.nav-pills类设计而成的。

<div class="bs-docs-example">
<ul class="nav nav-pills">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">财经</a></li>
<li><a href="#">体育</a></li>
<li><a href="#">论坛</a></li>
</ul>
</div>

堆叠式标签导航

    堆叠式标签导航是区别于水平排列标签，通过.nav-stacked类设计而成的。

<div class="bs-docs-example">
<ul class="nav nav-tabs nav-stacked">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">财经</a></li>
<li><a href="#">体育</a></li>
<li><a href="#">论坛</a></li>
</ul>
</div>

下拉菜单式标签导航

    在标签导航中添加下拉菜单，可以通过添加.dropdown-menu类设计而成。

<div class="bs-docs-example">
<ul class="nav nav-tabs">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">财经</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">体育 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">足球</a></li>
<li><a href="#">篮球</a></li>
<li><a href="#">排球</a></li>
<li class="divider"></li>
<li><a href="#">游泳</a></li>
</ul>
</li>
<li><a href="#">论坛</a></li>
</ul>
</div>

导航列表

    在Bootstrap框架中通过<ul>中添加.nav-list类设计实现，导航列表。在<li>中添加.nav-header类定义导航列表分类标题。

<div class="bs-docs-example">
<div class="well" style="max-width: 320px; padding: 4px;">
<ul class="nav nav-list">
<li class="nav-header">新闻</li>
<li class="active"><a href="#">财经</a></li>
<li><a href="#">军事</a></li>
<li><a href="#">娱乐</a></li>
<li class="nav-header">体育</li>
<li><a href="#">足球</a></li>
<li><a href="#">篮球</a></li>
<li class="divider"></li>
<li><a href="#">排球</a></li>
</ul>
</div> <!-- /well -->
</div>

标签页式导航

    标签页式导航类似于桌面系统中的Tab界面，在网页中可以将导航固定在上下左右4个位置方向。在Bootstrap框架中，可以通过在导航组件中添加.tabbable类、.nav-tabs类、.tab-content类和.tab-pane类设计实现。 

<div class="bs-docs-example">
<div class="tabbable" style="margin-bottom: 8px;">
<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>
<li><a href="#tab4" data-toggle="tab">娱乐</a></li>
<li><a href="#tab5" data-toggle="tab">论坛</a></li>
</ul>
<div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
<div class="tab-pane active" id="tab1">
<p>新闻标签页.</p>
</div>
<div class="tab-pane" id="tab2">
<p>财经标签页.</p>
</div>
<div class="tab-pane" id="tab3">
<p>体育标签页.</p>
</div>
<div class="tab-pane" id="tab4">
<p>娱乐标签页.</p>
</div>
<div class="tab-pane" id="tab5">
<p>论坛标签页.</p>
</div>
</div>
</div> <!-- /tabbable -->
</div>

Bootstrap导航条

    在Bootstrap框架中所有导航条组件均使用.navbar类来实现。

    默认样式导航条

    导航条的默认样式式静态（static）形式的，通常包含一个标题（title）名称和一组导航项。通过.navbar类定义一个导航条，通过.brand类定义导航标题。

<div class="bs-docs-example">
<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>
<li><a href="#">体育</a></li>
<li><a href="#">论坛</a></li>
</ul>
</div>
</div>
</div>

导航条表单

    可以在导航条中通过<form>标签添加表单，可以包括输入框、按钮、搜索条等元素。

<div class="bs-docs-example">
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">提交</a>
<form class="navbar-form pull-left">
<input type="text" class="span2">
<button type="submit" class="btn">Submit</button>
</form>
</div>
</div>
</div>

响应式导航条

响应式导航条可以实现交互功能，要实现一个响应式导航条，需要把导航条包含在.nav-collapse类和.collapse类中，并向其中添加一个.btn-navbar类的触发按钮。

<div class="bs-docs-example">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">响应式导航条</a>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">导航条</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉导航条<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">导航条</a></li>
<li><a href="#">导航条</a></li>
<li class="divider"></li>
<li class="nav-header">导航条</li>
<li><a href="#">导航条</a></li>
</ul>
</li>
</ul>
<form class="navbar-search pull-left" action="">
<input type="text" class="search-query span2" placeholder="Search">
</form>
</div><!-- /.nav-collapse -->
</div>
</div><!-- /navbar-inner -->
</div><!-- /navbar -->
</div>

阅读更多