本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:bootstrap教程(二) —— 导航条
导航(标签形tab导航) 标签形导航,也称为选项卡导航。特别是在很多内容分块显示的时,使用这种选项卡来分组十分适合。 标签形导航是通过“nav-tabs”样式来实现。在制作标签形导航时需要在原导航“nav”上追加此类名,如: <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> 实现原理非常的简单,将菜单项(li)按块显示,并且让他们在同一水平上排列,然后定义非高亮菜单的样式和鼠标悬浮效果。代码如下: /*源码请查阅bootstrap.css文件第3494行~第3509行*/ .nav-tabs { border-bottom: 1px solid #ddd; } .nav-tabs > li { float: left; margin-bottom: -1px; } .nav-tabs > li > a { margin-right: 2px; line-height: 1.42857143; border: 1px solid transparent; border-radius: 4px 4px 0 0; } .nav-tabs > li >a:hover { border-color: #eee #eee #ddd; } 其实上例的效果和我们平时看到的选项卡效果并不一致。一般情况之下,选项卡教会有一个当前选中项。其实在Bootstrap框架也相应提供了。假设我们想让“Home”项为当前选中项,只需要在其标签上添加类名“class="active"”即可: <ul class="nav nav-tabs"> <li class="active"><a href="##">Home</a></li> … </ul> 对应样式代码如下: /*源码请查阅bootstrap.css文件第3510行~第3518行*/ .nav-tabs >li.active> a, .nav-tabs >li.active>a:hover, .nav-tabs >li.active>a:focus { color: #555; cursor: default; background-color: #fff; border: 1px solid #ddd; border-bottom-color: transparent; } 除了当前项之外,有的选项卡还带有禁用状态,实现这样的效果,只需要在标签项上添加“class="disabled"”即可: <ul class="nav nav-tabs"> <li class="active"><a href="##">Home</a></li> … <li class="disabled"><a href="##">Responsive</a></li> </ul> 实现这个效果的样式,在默认样式“.nav”中就带有: /*源码请查看bootstrap.css文件第3469行~第3478行*/ .nav>li.disabled> a { color: #999; } .nav>li.disabled>a:hover, .nav>li.disabled>a:focus { color: #999; text-decoration: none; cursor: not-allowed; background-color: transparent; } 注意:我们看到的选项卡效果,点击菜单项就可以切换内容,如果要实现这样的效果需要配合js插件,这部分将在后面的教程中会介绍。