标签导航
在主导航的基础上叠加.nav-tabs-card
即显示为标签导航。
基本样式
<ul class="nav nav-tabs-card">
<li class="active"><a href="javascript:;">栏目</a></li>
<li><a href="javascript:;">栏目</a></li>
<li><a href="javascript:;">栏目</a></li>
<li class="disabled"><a href="javascript:;">栏目</a></li>
</ul>
标签菜单
<ul class="nav nav-tabs-card nav-divider-line nav-box nav-menu">
<li class="active"><a href="javascript:;">栏目</a></li>
<li><a href="javascript:;">栏目</a></li>
<li><a href="javascript:;">栏目</a></li>
<li class="disabled"><a href="javascript:;">栏目</a></li>
</ul>
综合应用
显示方式、导航尺寸、子菜单等效果的综合应用。
<ul class="nav nav-tabs-card nav-block nav-big">
<li class="drop active">
<a href="javascript:;">栏目</a>
<div class="dropdown">
<ul class="nav nav-tabs-card nav-menu bg-white">
<li><a href="javascript:;">子栏目</a></li>
<li class="active"><a href="javascript:;">子栏目</a></li>
<li><a href="javascript:;">子栏目</a></li>
<li><a href="javascript:;">子栏目</a></li>
</ul>
</div>
</li>
<li><a href="javascript:;">栏目</a></li>
<li><a href="javascript:;">栏目</a></li>
<li class="disabled"><a href="javascript:;">栏目</a></li>
</ul>
深色背景
<div class="bg-main padding radius"> <ul class="nav nav-tabs-card nav-inverse"> <li class="drop active"> <a href="javascript:;">栏目</a> <div class="dropdown"> <ul class="nav nav-tabs-card nav-menu bg-white"> <li><a href="javascript:;">子栏目</a></li> <li class="active"><a href="javascript:;">子栏目</a></li> <li><a href="javascript:;">子栏目</a></li> <li><a href="javascript:;">子栏目</a></li> </ul> </div> </li> <li><a href="javascript:;">栏目</a></li> <li><a href="javascript:;">栏目</a></li> <li class="disabled"><a href="javascript:;">栏目</a></li> </ul> </div>