标签：
一、基础
<ul class="nav nav-tabs"> <li><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li><a href="##">Responsive</a></li> </ul>
Bootstrap框架中制作导航条主要通过“.nav”样式。默认的“.nav”样式不提供默认的导航样式，必须附加另外一个样式才会有效，比如“nav-tabs”、“nav-pills”之类
二、标签形tab导航
添加类“nav-tabs”，如果是当前在li上添加“active”，如果禁用添加“disabled”
<ul class="nav nav-tabs"> <li class="active"><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li class="disabled"><a href="##">Responsive</a></li> </ul>
三、胶囊形导航
<ul class="nav nav-pills"> //这里用nav-pills <li class="active"><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li class="disabled"><a href="##">Responsive</a></li> </ul>
四、垂直导航
<ul class="nav nav-tabs nav-stacked"> //加上nav-stacked <li class="active"><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li class="disabled"><a href="##">Responsive</a></li> </ul> <br /> <ul class="nav nav-pills nav-stacked"> //加上nav-stacked <li class="active"><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li class="nav-divider"></li> <li class="disabled"><a href="##">Responsive</a></li> </ul>
五、自适应导航
自适应导航是指导航占据容器的整个宽度，添加类“nav-justified”，要和“nav-pills”或“nav-tabs”一起使用。
<ul class="nav nav-tabs nav-justified"> <li class="active"><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li><a href="##">Responsive</a></li> </ul>
六、二级导航
<ul class="nav nav-pills"> <li class="active"><a href="##">首页</a></li> <li class="dropdown"> //添加dropdown <a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a> //添加dropdown-toggle类和 data-toggle="dropdown"属性 <ul class="dropdown-menu"> //添加dropdown-menu类 <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li><a href="##">Responsive</a></li> </ul> </li> <li><a href="##">关于我们</a></li> </ul>
七、面包屑导航
<ol class="breadcrumb"> <li><a href="#">首页</a></li> <li><a href="#">我的书</a></li> <li class="active">《图解CSS3》</li> </ol>
标签：
原文地址：http://www.cnblogs.com/shanoon/p/5403813.html
