四、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>