翻转切换

圆点切换

    <ul class="nav nav-turn">
      <li class="active"><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
    </ul>
  

实心样式

    <ul class="nav nav-turn nav-turn-dot">
      <li class="active"><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
    </ul>
  

线条切换

    <ul class="nav nav-turn nav-turn-line">
      <li class="active"><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
    </ul>
  

实心样式

    <ul class="nav nav-turn nav-turn-dot nav-turn-line">
      <li class="active"><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
    </ul>
  

轮播菜单

    <ul class="nav nav-turn nav-turn-dot nav-menu">
      <li class="active"><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
    </ul>
  

    <ul class="nav nav-turn nav-turn-dot nav-turn-line nav-menu">
      <li class="active"><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
    </ul>
  

颜色大小

在.nav叠加文本色，改变导航的颜色，叠加字号样式，可改变导航的大小；在.active叠加文本色样式，改变当前的颜色。

    <ul class="nav nav-turn text-main">
      <li class="active text-danger"><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
    </ul>

    <ul class="nav nav-turn nav-turn-dot nav-turn-line nav-menu text-success size-small">
      <li class="active text-dot"><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
      <li><a href="javascript:;"></a></li>
    </ul>